swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
42 lines • 1.58 kB
text/less
.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 {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{themeColor}'/></svg>");
left: 10px;
right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{themeColor}'/></svg>");
right: 10px;
left: auto;
}
.navigation-color-loop({
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
&.swiper-button-@{navColorName} {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{navColorValue}'/></svg>");
}
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
&.swiper-button-@{navColorName} {
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{navColorValue}'/></svg>");
}
}
});
.swiper-button-lock {
display: none;
}