/* === Swiper === */ @import url('./swiper-class/components/core/core.less'); @import url('./swiper-class/components/a11y/a11y.less'); @import url('./swiper-class/components/effect-coverflow/effect-coverflow.less'); @import url('./swiper-class/components/effect-cube/effect-cube.less'); @import url('./swiper-class/components/effect-fade/effect-fade.less'); @import url('./swiper-class/components/effect-flip/effect-flip.less'); @import url('./swiper-class/components/scrollbar/scrollbar.less'); @import url('./swiper-class/components/zoom/zoom.less'); // Navigation .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; &.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } // Pagination .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0,0,0); z-index: 10; &.swiper-pagination-hidden { opacity: 0; } } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; button& { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none; } .swiper-pagination-clickable & { cursor: pointer; } } .swiper-pagination-bullet-active { opacity: 1; } .swiper-container-vertical { > .swiper-pagination-bullets { right: 10px; top: 50%; transform:translate3d(0px,-50%,0); .swiper-pagination-bullet { margin: 6px 0; display: block; } &.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } } } } .swiper-container-horizontal { > .swiper-pagination-bullets { .swiper-pagination-bullet { margin: 0 4px; } &.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } } } } .swiper-pagination-progressbar { background: rgba(0,0,0,0.25); position: absolute; .swiper-pagination-progressbar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl & .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > &, .swiper-container-vertical > &.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > &, .swiper-container-horizontal > &.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } } .swiper-lazy-preloader { position: absolute; left: 50%; top: 50%; z-index: 10; } & when (@includeIosTheme) { @import url('./swiper-ios.less'); } & when (@includeMdTheme) { @import url('./swiper-md.less'); }