В каком событии swiper js нужно запускать пересчет bullets (точек) в пагинации?
Всем привет. Есть слайдер, реализованный с помощью swiper js. В слайдере используются навигация, пагинация, свайп. Необходимо ограничить количество точек в пагинации. При этом, количество точек должно сохраниться при переключении слайда с помощью пагинации, навигации и свайпа.
const slider = document.querySelector("#product-swiper");
const dotContainer = document.querySelector(".swiper-pagination");
const total = [...dotContainer.querySelectorAll(".swiper-pagination-bullet")].length;
const visible = 6;
const sideVisible = Math.floor(visible / 2);
let index = 0;
let mySwiper = new Swiper('#product-swiper', {
loop: true,
slidesPerView: 4,
slidesPerGroup: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
init: function() {
let realIndex = this.realIndex;
[...dotContainer.querySelectorAll(".swiper-pagination-bullet")]
.forEach(function(dot, index) {
dot.classList.toggle("active", index === realIndex);
let start = realIndex > sideVisible ? realIndex - sideVisible : 0;
let end = start + visible - 1;
if (end >= total) {
start = total - visible;
}
dot.classList.toggle("hidden", index < start || index > end);
})
}
},
});
Исходник
На данный момент количество точек изменяется при событии slideChange, но не совсем верно, тк при пролистывании на активный слайд добавляется класс swiper-pagination-bullet-active, но hidden не добавляется первому элементу.
Как воспроизвести:
- при клике на стрелки точек становится 6
- при достижении 4го слайда начинают добавляться точки, хотя этого быть не должно.
Подскажите, пожалуйста, как поправить или нужно использовать другое событие (какое)?
PS: Попытки init, beforeInit, activeIndexChange - не привели к желаемому результату.
Идея на базе Как в слайдере вывести количество точек отличное от количества слайдов