PluginProbe
Elementor Website Builder – more than just a page builder / 3.21.7
Elementor Website Builder – more than just a page builder v3.21.7
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
elementor / assets / lib / swiper / css / swiper.css

swiper.css in Elementor Website Builder – more than just a page builder 3.21.7, at assets/lib/swiper/css/swiper.css

502 lines 15.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Swiper 3.4.2
3 * Customized by Elementor team
4 */
5 .swiper-container {
6 margin-left: auto;
7 margin-right: auto;
8 position: relative;
9 overflow: hidden;
10 /* Fix of Webkit flickering */
11 z-index: 1;
12 }
13 .swiper-container .swiper-slide figure {
14 line-height: 0;
15 }
16 .swiper-container .elementor-lightbox-content-source {
17 display: none;
18 }
19
20 .swiper-container-no-flexbox .swiper-slide {
21 float: left;
22 }
23
24 .swiper-container-vertical > .swiper-wrapper {
25 flex-direction: column;
26 }
27
28 .swiper-wrapper {
29 position: relative;
30 width: 100%;
31 height: 100%;
32 z-index: 1;
33 display: flex;
34 transition-property: transform;
35 box-sizing: content-box;
36 }
37
38 .swiper-container-android .swiper-slide, .swiper-wrapper {
39 transform: translate3d(0px, 0, 0);
40 }
41
42 .swiper-container-multirow > .swiper-wrapper {
43 flex-wrap: wrap;
44 }
45
46 .swiper-container-free-mode > .swiper-wrapper {
47 transition-timing-function: ease-out;
48 margin: 0 auto;
49 }
50
51 .swiper-slide {
52 flex-shrink: 0;
53 width: 100%;
54 height: 100%;
55 position: relative;
56 }
57
58 /* Auto Height */
59 .swiper-container-autoheight {
60 height: auto;
61 }
62 .swiper-container-autoheight .swiper-slide {
63 height: auto;
64 }
65 .swiper-container-autoheight .swiper-wrapper {
66 align-items: flex-start;
67 transition-property: transform, height;
68 }
69
70 /* a11y */
71 .swiper-container .swiper-notification {
72 position: absolute;
73 left: 0;
74 top: 0;
75 pointer-events: none;
76 opacity: 0;
77 z-index: -1000;
78 }
79
80 /* IE10 Windows Phone 8 Fixes */
81 .swiper-wp8-horizontal {
82 touch-action: pan-y;
83 }
84
85 .swiper-wp8-vertical {
86 touch-action: pan-x;
87 }
88
89 /* Arrows */
90 .swiper-button-prev, .swiper-button-next {
91 position: absolute;
92 top: 50%;
93 width: 27px;
94 height: 44px;
95 margin-top: -22px;
96 z-index: 10;
97 cursor: pointer;
98 background-size: 27px 44px;
99 background: no-repeat center;
100 }
101
102 .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
103 opacity: 0.35;
104 cursor: auto;
105 pointer-events: none;
106 }
107
108 .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
109 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
110 left: 10px;
111 right: auto;
112 }
113
114 .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
115 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
116 }
117
118 .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
119 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
120 }
121
122 .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
123 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
124 right: 10px;
125 left: auto;
126 }
127
128 .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
129 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
130 }
131
132 .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
133 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
134 }
135
136 /* Pagination Styles */
137 .swiper-pagination {
138 position: absolute;
139 text-align: center;
140 transition: 300ms;
141 transform: translate3d(0, 0, 0);
142 z-index: 10;
143 }
144 .swiper-pagination.swiper-pagination-hidden {
145 opacity: 0;
146 }
147
148 /* Common Styles */
149 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
150 bottom: 5px;
151 left: 0;
152 width: 100%;
153 }
154
155 /* Bullets */
156 .swiper-pagination-bullet {
157 width: 6px;
158 height: 6px;
159 display: inline-block;
160 border-radius: 50%;
161 background: #000;
162 opacity: 0.2;
163 }
164
165 .swiper-pagination-fraction {
166 color: #000;
167 }
168
169 button.swiper-pagination-bullet {
170 border: none;
171 margin: 0;
172 padding: 0;
173 box-shadow: none;
174 appearance: none;
175 }
176
177 .swiper-pagination-clickable .swiper-pagination-bullet {
178 cursor: pointer;
179 }
180
181 .swiper-pagination-white .swiper-pagination-bullet {
182 background: #fff;
183 }
184
185 .swiper-pagination-bullet-active {
186 opacity: 1;
187 }
188
189 .swiper-pagination-white .swiper-pagination-bullet-active {
190 background: #fff;
191 }
192
193 .swiper-pagination-black .swiper-pagination-bullet-active {
194 background: #000;
195 }
196
197 .swiper-container-vertical > .swiper-pagination-bullets {
198 right: 10px;
199 top: 50%;
200 transform: translate3d(0px, -50%, 0);
201 }
202 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
203 margin: 5px 0;
204 display: block;
205 }
206
207 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
208 margin: 0 6px;
209 }
210
211 /* Progressbar */
212 .swiper-pagination-progressbar {
213 background: rgba(0, 0, 0, 0.25);
214 position: absolute;
215 }
216 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
217 background: #000;
218 position: absolute;
219 left: 0;
220 top: 0;
221 width: 100%;
222 height: 100%;
223 transform: scale(0);
224 transform-origin: left top;
225 }
226
227 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
228 transform-origin: right top;
229 }
230
231 .swiper-container-horizontal > .swiper-pagination-progressbar {
232 width: 100%;
233 height: 4px;
234 left: 0;
235 top: 0;
236 }
237
238 .swiper-container-vertical > .swiper-pagination-progressbar {
239 width: 4px;
240 height: 100%;
241 left: 0;
242 top: 0;
243 }
244
245 .swiper-pagination-progressbar.swiper-pagination-white {
246 background: rgba(255, 255, 255, 0.5);
247 }
248 .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
249 background: #fff;
250 }
251 .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
252 background: #000;
253 }
254
255 /* 3D Container */
256 .swiper-container-3d {
257 perspective: 1200px;
258 }
259 .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
260 transform-style: preserve-3d;
261 }
262 .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
263 position: absolute;
264 left: 0;
265 top: 0;
266 width: 100%;
267 height: 100%;
268 pointer-events: none;
269 z-index: 10;
270 }
271 .swiper-container-3d .swiper-slide-shadow-left {
272 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
273 }
274 .swiper-container-3d .swiper-slide-shadow-right {
275 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
276 }
277 .swiper-container-3d .swiper-slide-shadow-top {
278 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
279 }
280 .swiper-container-3d .swiper-slide-shadow-bottom {
281 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
282 }
283
284 /* Coverflow */
285 .swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper {
286 /* Windows 8 IE 10 fix */
287 -ms-perspective: 1200px;
288 }
289
290 /* Cube + Flip */
291 .swiper-container-cube, .swiper-container-flip {
292 overflow: visible;
293 }
294
295 .swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide {
296 pointer-events: none;
297 z-index: 1;
298 }
299
300 .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide {
301 pointer-events: none;
302 }
303
304 .swiper-container-cube .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
305 pointer-events: auto;
306 }
307
308 .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-right {
309 z-index: 0;
310 backface-visibility: hidden;
311 }
312
313 /* Cube */
314 .swiper-container-cube .swiper-slide {
315 visibility: hidden;
316 transform-origin: 0 0;
317 width: 100%;
318 height: 100%;
319 }
320 .swiper-container-cube.swiper-container-rtl .swiper-slide {
321 transform-origin: 100% 0;
322 }
323 .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
324 pointer-events: auto;
325 visibility: visible;
326 }
327 .swiper-container-cube .swiper-cube-shadow {
328 position: absolute;
329 left: 0;
330 bottom: 0;
331 width: 100%;
332 height: 100%;
333 background: #000;
334 opacity: 0.6;
335 -webkit-filter: blur(50px);
336 filter: blur(50px);
337 z-index: 0;
338 }
339
340 /* Fade */
341 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
342 transition-timing-function: ease-out;
343 }
344 .swiper-container-fade .swiper-slide {
345 pointer-events: none;
346 transition-property: opacity;
347 }
348 .swiper-container-fade .swiper-slide .swiper-slide {
349 pointer-events: none;
350 }
351 .swiper-container-fade .swiper-slide-active {
352 pointer-events: auto;
353 }
354 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
355 pointer-events: auto;
356 }
357
358 .swiper-zoom-container {
359 width: 100%;
360 height: 100%;
361 display: flex;
362 justify-content: center;
363 align-items: center;
364 text-align: center;
365 }
366 .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {
367 max-width: 100%;
368 max-height: 100%;
369 object-fit: contain;
370 }
371
372 /* Scrollbar */
373 .swiper-scrollbar {
374 border-radius: 10px;
375 position: relative;
376 -ms-touch-action: none;
377 background: rgba(0, 0, 0, 0.1);
378 }
379
380 .swiper-container-horizontal > .swiper-scrollbar {
381 position: absolute;
382 left: 1%;
383 bottom: 3px;
384 z-index: 50;
385 height: 5px;
386 width: 98%;
387 }
388
389 .swiper-container-vertical > .swiper-scrollbar {
390 position: absolute;
391 right: 3px;
392 top: 1%;
393 z-index: 50;
394 width: 5px;
395 height: 98%;
396 }
397
398 .swiper-scrollbar-drag {
399 height: 100%;
400 width: 100%;
401 position: relative;
402 background: rgba(0, 0, 0, 0.5);
403 border-radius: 10px;
404 left: 0;
405 top: 0;
406 }
407
408 .swiper-scrollbar-cursor-drag {
409 cursor: move;
410 }
411
412 .elementor-pagination-position-outside .swiper-container {
413 padding-bottom: 30px;
414 }
415 .elementor-pagination-position-outside .elementor-swiper-button {
416 top: calc(50% - 30px / 2);
417 }
418
419 .elementor-swiper {
420 position: relative;
421 }
422
423 .elementor-main-swiper {
424 position: static;
425 }
426
427 .elementor-arrows-position-outside .swiper-container {
428 width: calc(100% - 60px);
429 }
430 .elementor-arrows-position-outside .elementor-swiper-button-prev {
431 left: 0;
432 }
433 .elementor-arrows-position-outside .elementor-swiper-button-next {
434 right: 0;
435 }
436
437 .swiper-image-stretch .swiper-slide .swiper-slide-image {
438 width: 100%;
439 }
440
441 .elementor-swiper-button {
442 position: absolute;
443 display: inline-flex;
444 z-index: 1;
445 cursor: pointer;
446 font-size: 25px;
447 color: rgba(238, 238, 238, 0.9);
448 top: 50%;
449 transform: translateY(-50%);
450 }
451 .elementor-swiper-button svg {
452 fill: rgba(238, 238, 238, 0.9);
453 height: 1em;
454 width: 1em;
455 }
456 .elementor-swiper-button-prev {
457 left: 10px;
458 }
459 .elementor-swiper-button-next {
460 right: 10px;
461 }
462 .elementor-swiper-button.swiper-button-disabled {
463 opacity: 0.3;
464 }
465
466 .swiper-container-cube .elementor-swiper-button {
467 transform: translate3d(0, -50%, 1px);
468 }
469
470 /* Preloader */
471 .swiper-lazy-preloader {
472 width: 42px;
473 height: 42px;
474 position: absolute;
475 left: 50%;
476 top: 50%;
477 margin-left: -21px;
478 margin-top: -21px;
479 z-index: 10;
480 transform-origin: 50%;
481 animation: swiper-preloader-spin 1s steps(12, end) infinite;
482 }
483 .swiper-lazy-preloader:after {
484 display: block;
485 content: "";
486 width: 100%;
487 height: 100%;
488 background-size: 100%;
489 background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 50%;
490 }
491
492 .swiper-lazy-preloader-white:after {
493 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
494 }
495
496 @keyframes swiper-preloader-spin {
497 100% {
498 transform: rotate(360deg);
499 }
500 }
501
502 /*# sourceMappingURL=swiper.css.map */