@@ -92,14 +92,15 @@ button {
92
92
.carousel .control-disabled .control-arrow {
93
93
opacity : 0 ;
94
94
filter : alpha (opacity=0);
95
- cursor : inherit; }
96
- .carousel .control-left .control-arrow {
95
+ cursor : inherit;
96
+ display : none; }
97
+ .carousel .control-prev .control-arrow {
97
98
left : 0 ; }
98
- .carousel .control-left .control-arrow : before {
99
+ .carousel .control-prev .control-arrow : before {
99
100
content : '\e803' ; }
100
- .carousel .control-right .control-arrow {
101
+ .carousel .control-next .control-arrow {
101
102
right : 0 ; }
102
- .carousel .control-right .control-arrow : before {
103
+ .carousel .control-next .control-arrow : before {
103
104
content : '\e802' ; }
104
105
105
106
.carousel {
@@ -119,8 +120,7 @@ button {
119
120
margin-top : -13px ;
120
121
font-size : 18px ; }
121
122
.carousel .thumbs-wrapper {
122
- position : relative;
123
- margin : 0 20px ;
123
+ margin : 20px ;
124
124
overflow : hidden; }
125
125
.carousel .thumbs {
126
126
-webkit-transition : all 0.15s ease-in;
@@ -174,40 +174,74 @@ button {
174
174
overflow : hidden;
175
175
margin : auto;
176
176
width : 100% ; }
177
+ .carousel .slider-wrapper .axis-horizontal .slider {
178
+ display : flex;
179
+ display : -webkit-flex; }
180
+ .carousel .slider-wrapper .axis-horizontal .slide {
181
+ flex-direction : column;
182
+ flex-flow : column; }
183
+ .carousel .slider-wrapper .axis-vertical .slider {
184
+ display : inline-block; }
185
+ .carousel .slider-wrapper .axis-vertical .slide {
186
+ position : relative;
187
+ display : block;
188
+ margin : 0 ; }
177
189
.carousel .slider {
178
- -webkit-transition : all 0.35s ease-in;
179
- -moz-transition : all 0.35s ease-in;
180
- -ms-transition : all 0.35s ease-in;
181
- -o-transition : all 0.35s ease-in;
182
- transition : all 0.35s ease-in;
183
- -webkit-transform : translate3d (0 , 0 , 0 );
184
- -moz-transform : translate3d (0 , 0 , 0 );
185
- -ms-transform : translate3d (0 , 0 , 0 );
186
- -o-transform : translate3d (0 , 0 , 0 );
187
- transform : translate3d (0 , 0 , 0 );
188
- display : flex;
189
190
position : relative;
190
191
list-style : none; }
191
- .carousel .slider .swiping {
192
- -webkit-transition : none 0 ease-in;
193
- -moz-transition : none 0 ease-in;
194
- -ms-transition : none 0 ease-in;
195
- -o-transition : none 0 ease-in;
196
- transition : none 0 ease-in; }
192
+ .carousel .slider .animated {
193
+ -webkit-transition : all 0.35 s ease-in-out ;
194
+ -moz-transition : all 0.35 s ease-in-out ;
195
+ -ms-transition : all 0.35 s ease-in-out ;
196
+ -o-transition : all 0.35 s ease-in-out ;
197
+ transition : all 0.35 s ease-in-out ; }
197
198
.carousel .slide {
198
- flex-direction : column;
199
- flex-flow : column;
200
199
min-width : 100% ;
201
- margin : 0 ; }
200
+ margin : 0 ;
201
+ padding-bottom : 32px ; }
202
202
.carousel .slide img {
203
203
width : 100% ;
204
204
vertical-align : top; }
205
+ .carousel .slide .legend {
206
+ -webkit-transition : all 0.5s ease-in-out;
207
+ -moz-transition : all 0.5s ease-in-out;
208
+ -ms-transition : all 0.5s ease-in-out;
209
+ -o-transition : all 0.5s ease-in-out;
210
+ transition : all 0.5s ease-in-out;
211
+ position : absolute;
212
+ bottom : 0 ;
213
+ width : 100% ;
214
+ background : # 000 ;
215
+ color : # fff ;
216
+ padding : 10px ;
217
+ font-size : 12px ;
218
+ text-align : center; }
219
+ @media (min-width : 960px ) {
220
+ .carousel .slide {
221
+ padding-bottom : 0 ; }
222
+ .carousel .slide .legend {
223
+ bottom : 40px ;
224
+ margin-left : 10% ;
225
+ width : 80% ;
226
+ background : rgba (0 , 0 , 0 , 0.3 );
227
+ color : rgba (255 , 255 , 255 , 0.6 );
228
+ border-radius : 5px ;
229
+ padding : 10px ;
230
+ opacity : 0 ; }
231
+ .carousel .slide .selected .legend {
232
+ opacity : 1 ; }
233
+ .carousel .slide : hover .legend {
234
+ background : rgba (0 , 0 , 0 , 0.5 );
235
+ color : rgba (255 , 255 , 255 , 0.9 ); } }
205
236
.carousel .control-dots {
206
237
position : absolute;
207
- bottom : 0 ;
238
+ bottom : 32 px ;
208
239
margin : 10px 0 ;
209
240
text-align : center;
210
241
width : 100% ; }
242
+ @media (min-width : 960px ) {
243
+ .carousel .control-dots {
244
+ bottom : 0 ; } }
211
245
.carousel .control-dots .dot {
212
246
-webkit-transition : opacity 0.25s ease-in;
213
247
-moz-transition : opacity 0.25s ease-in;
0 commit comments