Subversion Repositories SmartDukaan

Rev

Rev 25502 | Details | Compare with Previous | 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;
25502 tejbeer 81 
 
25501 tejbeer 82 
}
83 
 </style>
84 
 
85 
 
86 
 
87 
 
88 
 
89 
 
90 
 
91 
  <section class="wrapper">
92 
	<div class="row">
25502 tejbeer 93 
 
94 
 
95 
 
25501 tejbeer 96 
   <div style="align:center" id="carousel">
97 
 
98 
       <div class="hideLeft">
25568 tejbeer 99 
        <img src="resources/images/rising_star_new.png">
25501 tejbeer 100 
      </div>
101 
 
102 
      <div class="prevLeftSecond">
25568 tejbeer 103 
        <img src="resources/images/bronze_new.png">
25501 tejbeer 104 
      </div>
105 
 
106 
      <div class="prev">
25568 tejbeer 107 
        <img src="resources/images/silver_new.png">
25501 tejbeer 108 
      </div>
109 
 
110 
      <div class="selected">
25568 tejbeer 111 
        <img src="resources/images/gold_new.png">
25501 tejbeer 112 
      </div>
113 
 
114 
      <div class="next">
25568 tejbeer 115 
        <img src="resources/images/diamond_new.png">
25501 tejbeer 116 
      </div>
117 
 
118 
      <div class="nextRightSecond">
25568 tejbeer 119 
        <img src="resources/images/platnium_new.png">
25501 tejbeer 120 
      </div>
121 
 
122 
    </div>
25502 tejbeer 123 
 
124 
</div>
25501 tejbeer 125 
</section>
126 
 
127 
<script>
128 
 
129 
function moveToSelected(element) {
130 
 
131 
  if (element == "next") {
132 
    var selected = $(".selected").next();
133 
  } else if (element == "prev") {
134 
    var selected = $(".selected").prev();
135 
  } else {
136 
    var selected = element;
137 
  }
138 
 
139 
  var next = $(selected).next();
140 
  var prev = $(selected).prev();
141 
  var prevSecond = $(prev).prev();
142 
  var nextSecond = $(next).next();
143 
 
144 
  $(selected).removeClass().addClass("selected");
145 
 
146 
  $(prev).removeClass().addClass("prev");
147 
  $(next).removeClass().addClass("next");
148 
 
149 
  $(nextSecond).removeClass().addClass("nextRightSecond");
150 
  $(prevSecond).removeClass().addClass("prevLeftSecond");
151 
 
152 
  $(nextSecond).nextAll().removeClass().addClass('hideRight');
153 
  $(prevSecond).prevAll().removeClass().addClass('hideLeft');
154 
 
155 
}
156 
 
157 
// Eventos teclado
158 
$(document).keydown(function(e) {
159 
    switch(e.which) {
160 
        case 37: // left
161 
        moveToSelected('prev');
162 
        break;
163 
 
164 
        case 39: // right
165 
        moveToSelected('next');
166 
        break;
167 
 
168 
        default: return;
169 
    }
170 
    e.preventDefault();
171 
});
172 
 
173 
$('#carousel div').click(function() {
174 
  moveToSelected($(this));
175 
});
176 
 
177 
$('#prev').click(function() {
178 
  moveToSelected('prev');
179 
});
180 
 
181 
$('#next').click(function() {
182 
  moveToSelected('next');
183 
});
184 
 
185 
 
186 
</script>
187 
 
188 
 
189 
 
190 
 
191 
 
192 
 
193 
 
194 
 
195 
 
196 
 
197 
 
198 
 
199 
 
200