Subversion Repositories SmartDukaan

Rev

Rev 25502 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
25501 tejbeer 1 
 <style>
2 
#carousel {
3 
  position: relative;
4 
  height: 700px;
5 
  width:70%;
6 
  top: 50%;
7 
  margin:auto;
8 
  //transform: translateY(-50%);
9 
  overflow: hidden;
10 
}
11 
#carousel div {
12 
  position: absolute;
13 
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
14 
  opacity: 1;
15 
}
16 
#carousel div img {
17 
  width: 400px;
18 
  transition: width 1s;
19 
}
20 
#carousel div.hideLeft {
21 
  left: 0%;
22 
  opacity: 0;
23 
  transform: translateY(50%) translateX(-50%);
24 
}
25 
#carousel div.hideLeft img {
26 
  width: 200px;
27 
}
28 
#carousel div.hideRight {
29 
  left: 100%;
30 
  opacity: 0;
31 
  transform: translateY(50%) translateX(-50%);
32 
}
33 
#carousel div.hideRight img {
34 
  width: 200px;
35 
}
36 
#carousel div.prev {
37 
  z-index: 5;
38 
  left: 30%;
39 
  transform: translateY(50px) translateX(-50%);
40 
}
41 
#carousel div.prev img {
42 
  width: 300px;
43 
}
44 
#carousel div.prevLeftSecond {
45 
  z-index: 4;
46 
  left: 15%;
47 
  transform: translateY(50%) translateX(-50%);
48 
  opacity: 0.7;
49 
}
50 
#carousel div.prevLeftSecond img {
51 
  width: 200px;
52 
}
53 
#carousel div.selected {
54 
  z-index: 10;
55 
  left: 50%;
56 
  transform: translateY(0px) translateX(-50%);
57 
}
58 
#carousel div.next {
59 
  z-index: 5;
60 
  left: 70%;
61 
  transform: translateY(50px) translateX(-50%);
62 
}
63 
#carousel div.next img {
64 
  width: 300px;
65 
}
66 
#carousel div.nextRightSecond {
67 
  z-index: 4;
68 
  left: 85%;
69 
  transform: translateY(50%) translateX(-50%);
70 
  opacity: 0.7;
71 
}
72 
#carousel div.nextRightSecond img {
73 
  width: 200px;
74 
}
75 
 
76 
.buttons {
77 
  position: fixed;
78 
  left: 50%;
79 
  transform: translateX(-50%);
80 
  bottom: 10px;
81 
  display: none;
82 
}
83 
 </style>
84 
 
85 
 
86 
 
87 
 
88 
 
89 
 
90 
 
91 
  <section class="wrapper">
92 
	<div class="row">
93 
		<div class="col-lg-12">
94 
			<h3 class="page-header"><i class="icon_document_alt"></i>Target Info</h3>
95 
		</div>
96 
	</div>
97 
	<div class="row">
98 
   <div style="align:center" id="carousel">
99 
 
100 
       <div class="hideLeft">
101 
        <img src="resources/images/rising-star.png">
102 
      </div>
103 
 
104 
      <div class="prevLeftSecond">
105 
        <img src="resources/images/bronze.png">
106 
      </div>
107 
 
108 
      <div class="prev">
109 
        <img src="resources/images/silver.png">
110 
      </div>
111 
 
112 
      <div class="selected">
113 
        <img src="resources/images/gold.png">
114 
      </div>
115 
 
116 
      <div class="next">
117 
        <img src="resources/images/diamond.png">
118 
      </div>
119 
 
120 
      <div class="nextRightSecond">
121 
        <img src="resources/images/platinum.png">
122 
      </div>
123 
 
124 
    </div>
125 
 
126 
    <div class="buttons">
127 
      <button id="prev">Prev</button>
128 
      <button id="next">Next</button>
129 
    </div>
130 
  </div>
131 
 
132 
</section>
133 
 
134 
<script>
135 
 
136 
function moveToSelected(element) {
137 
 
138 
  if (element == "next") {
139 
    var selected = $(".selected").next();
140 
  } else if (element == "prev") {
141 
    var selected = $(".selected").prev();
142 
  } else {
143 
    var selected = element;
144 
  }
145 
 
146 
  var next = $(selected).next();
147 
  var prev = $(selected).prev();
148 
  var prevSecond = $(prev).prev();
149 
  var nextSecond = $(next).next();
150 
 
151 
  $(selected).removeClass().addClass("selected");
152 
 
153 
  $(prev).removeClass().addClass("prev");
154 
  $(next).removeClass().addClass("next");
155 
 
156 
  $(nextSecond).removeClass().addClass("nextRightSecond");
157 
  $(prevSecond).removeClass().addClass("prevLeftSecond");
158 
 
159 
  $(nextSecond).nextAll().removeClass().addClass('hideRight');
160 
  $(prevSecond).prevAll().removeClass().addClass('hideLeft');
161 
 
162 
}
163 
 
164 
// Eventos teclado
165 
$(document).keydown(function(e) {
166 
    switch(e.which) {
167 
        case 37: // left
168 
        moveToSelected('prev');
169 
        break;
170 
 
171 
        case 39: // right
172 
        moveToSelected('next');
173 
        break;
174 
 
175 
        default: return;
176 
    }
177 
    e.preventDefault();
178 
});
179 
 
180 
$('#carousel div').click(function() {
181 
  moveToSelected($(this));
182 
});
183 
 
184 
$('#prev').click(function() {
185 
  moveToSelected('prev');
186 
});
187 
 
188 
$('#next').click(function() {
189 
  moveToSelected('next');
190 
});
191 
 
192 
 
193 
</script>
194 
 
195 
 
196 
 
197 
 
198 
 
199 
 
200 
 
201 
 
202 
 
203 
 
204 
 
205 
 
206 
 
207