如何向滑动滑块活动类添加分页？

Question

如何将活动类添加到查看的分页，反之亦然如何在返回时将其删除 扫地机滑块 也许你可以以某种方式制作一个自定义进度条 我将非常感谢编写一个函数 这是我的代码

var swiper = new Swiper(".repair-calc_slider", {
navigation: {
  nextEl: ".repair-calc-next",
  prevEl: ".repair-calc-prev",
},
pagination: {
    el: ".repair-calc-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },

});

Answer 1

我认为你最好的选择是使用 slideChange SwiperEvent

var swiper = new Swiper(".repair-calc_slider", {
navigation: {
    nextEl: ".repair-calc-next",
    prevEl: ".repair-calc-prev",
},
pagination: {
    el: ".repair-calc-pagination",
    clickable: true,
    renderBullet: function (index, className) {
        return '' + (index + 1) + "";
    },
},
// New function here -->
on: {
    slideChange: function () {
        let slides = this.slides;

        // Remove the 'active' class from all slides
        for (let i = 0; i < slides.length; i++) {
            slides[i].classList.remove('active');
        }

        // Add the 'active' class to the currently active slide
        slides[this.activeIndex].classList.add('active');
    },
},
});