Swiper Slider
Swiper Slider is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior For more details
HTML Code
<div class="overflow-hidden ecommerce-slider custom-silder-01">
<ul class="p-0 m-0 mb-2 swiper-wrapper list-inline">
<li class="swiper-slide card-slide">
<div> Slide1 </div>
</li>
<li class="swiper-slide card-slide">
<div>Slide2</div>
</li>
<li class="swiper-slide card-slide">
<div>Slide3</div>
</li>
<li class="swiper-slide card-slide">
<div>Slide4</div>
</li>
<li class="swiper-slide card-slide">
<div>Slide5</div>
</li>
<li class="swiper-slide card-slide">
<div>Slide6</div>
</li>
<li class="swiper-slide card-slide">
<div>Slide7</div>
</li>
</ul>
</div>
Script
if ($('.ecommerce-slider').length > 0) {
const options = {
centeredSlides: false,
loop: true,
autoplay:true,
grabcursor: true,
effect: "cube",
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar'
}
}
let swiper = new Swiper('.ecommerce-slider',options);
document.addEventListener('ChangeMode', (e) => {
if (e.detail.rtl === 'rtl' || e.detail.rtl === 'ltr') {
swiper.destroy(true, true)
setTimeout(() => {
swiper = new Swiper('.ecommerce-slider',options);
}, 500);
}
})
}