:root {
|
--swiper-theme-color: #{$themeColor};
|
}
|
.swiper-container {
|
margin-left: auto;
|
margin-right: auto;
|
position: relative;
|
overflow: hidden;
|
list-style: none;
|
padding: 0;
|
/* Fix of Webkit flickering */
|
z-index:1;
|
}
|
.swiper-container-vertical > .swiper-wrapper {
|
flex-direction: column;
|
}
|
.swiper-wrapper {
|
position:relative;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
display: flex;
|
transition-property:transform;
|
box-sizing: content-box;
|
}
|
.swiper-container-android .swiper-slide,
|
.swiper-wrapper {
|
transform:translate3d(0px,0,0);
|
}
|
.swiper-container-multirow > .swiper-wrapper {
|
flex-wrap: wrap;
|
}
|
.swiper-container-multirow-column > .swiper-wrapper {
|
flex-wrap: wrap;
|
flex-direction: column;
|
}
|
.swiper-container-free-mode > .swiper-wrapper {
|
transition-timing-function: ease-out;
|
margin: 0 auto;
|
}
|
.swiper-slide {
|
flex-shrink: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
transition-property: transform;
|
}
|
.swiper-slide-invisible-blank {
|
visibility: hidden;
|
}
|
/* Auto Height */
|
.swiper-container-autoheight {
|
&, .swiper-slide {
|
height: auto;
|
}
|
|
.swiper-wrapper {
|
align-items: flex-start;
|
transition-property: transform, height;
|
}
|
}
|
|
/* 3D Effects */
|
.swiper-container-3d {
|
perspective: 1200px;
|
.swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
|
transform-style: preserve-3d;
|
}
|
.swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
pointer-events: none;
|
z-index: 10;
|
}
|
.swiper-slide-shadow-left {
|
background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
}
|
.swiper-slide-shadow-right {
|
background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
}
|
.swiper-slide-shadow-top {
|
background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
}
|
.swiper-slide-shadow-bottom {
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
}
|
}
|
|
/* CSS Mode */
|
.swiper-container-css-mode {
|
> .swiper-wrapper {
|
overflow: auto;
|
scrollbar-width: none; /* For Firefox */
|
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
> .swiper-wrapper > .swiper-slide {
|
scroll-snap-align: start start;
|
}
|
}
|
.swiper-container-horizontal.swiper-container-css-mode {
|
> .swiper-wrapper {
|
scroll-snap-type: x mandatory;
|
}
|
}
|
.swiper-container-vertical.swiper-container-css-mode {
|
> .swiper-wrapper {
|
scroll-snap-type: y mandatory;
|
}
|
}
|
