Multiple Swiper/Slick Slider with Count - Ayush Shrestha || UI/UX || Front-end || Angular || React || Wordpress

Multiple Swiper/Slick Slider with Count

multiple-swiper-slide-with-count

In this article, you will learn how to add count total and current slide on each slider where you have multiple swiper sliders and slick slider

HTML

Custom JS

let largeSliders = document.querySelectorAll(‘.swiperSimple’)
let prevArrow = document.querySelectorAll(‘.swiper-button-prev’)
let nextArrow = document.querySelectorAll(‘.swiper-button-next’)
let swiperSlide = document.querySelectorAll(‘.swiper-slide’)
let slideCurrent = document.querySelectorAll(‘.slide-current’)
let slideTotal = document.querySelectorAll(‘.slide-total’)
largeSliders.forEach((slider, index) => {
let sliderLength = slider.children[0].children.length
let numOfSlides = sliderLength;
//let result = (sliderLength > 1) ? true : false
var swiper = new Swiper(slider, {
//loop: result,
navigation: {
prevEl: prevArrow[index],
nextEl: nextArrow[index],
},
on: {
slideChange: function () {
var currentSlide = this.realIndex + 1;
slideCurrent[index].innerHTML = currentSlide;
},
beforeInit: function () {
slideTotal[index].innerHTML = numOfSlides;
}
}
});
})

Related Blogs

Leave a Reply

No videos found.