В каком событии 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 не добавляется первому элементу.

Как воспроизвести:

  1. при клике на стрелки точек становится 6
  2. при достижении 4го слайда начинают добавляться точки, хотя этого быть не должно.

Подскажите, пожалуйста, как поправить или нужно использовать другое событие (какое)?

PS: Попытки init, beforeInit, activeIndexChange - не привели к желаемому результату. Идея на базе Как в слайдере вывести количество точек отличное от количества слайдов


Ответы (0 шт):