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;
}
}
});
})
