Swiper滑块分页：实现已浏览项激活类的添加与移除

一、标记已浏览分页项（添加/移除activity类） #

通过Swiper的slideChange和init事件，动态为当前slide及之前的分页项添加activity类，返回时移除后续分页项的该类。修改你的代码如下：

// 初始化Swiper实例
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>";
    },
  },
  // 绑定事件：初始化和切换slide时更新分页状态
  on: {
    init: function() {
      updateVisitedPagination(this);
    },
    slideChange: function() {
      updateVisitedPagination(this);
    }
  }
});

// 自定义函数：更新已浏览分页项的类
function updateVisitedPagination(swiperInstance) {
  var currentIndex = swiperInstance.activeIndex;
  var bullets = swiperInstance.pagination.bullets;
  
  bullets.each(function(index) {
    if (index <= currentIndex) {
      this.classList.add("activity");
    } else {
      this.classList.remove("activity");
    }
  });
}

配合CSS样式（按需调整）：

.repair-calc-pagination .swiper-pagination-bullet.activity {
  background-color: #你的激活色值;
  transform: scale(1.2);
  opacity: 1;
}

二、自定义进度条实现 #

如果用进度条展示浏览进度，可通过以下步骤实现：

1. 添加HTML结构 #

在滑块容器旁插入进度条元素：

<div class="swiper-progress-bar"></div>

2. 编写CSS样式 #

.swiper-progress-bar {
  height: 4px;
  background-color: #eee;
  width: 100%;
  margin-top: 10px;
}
.swiper-progress-bar-fill {
  height: 100%;
  background-color: #你的主色值;
  width: 0%;
  transition: width 0.3s ease;
}

3. 修改Swiper代码，添加进度条逻辑 #

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>";
    },
  },
  on: {
    init: function() {
      updateProgressBar(this);
    },
    slideChange: function() {
      updateProgressBar(this);
    }
  }
});

// 自定义函数：更新进度条宽度
function updateProgressBar(swiperInstance) {
  var totalSlides = swiperInstance.slides.length;
  var currentIndex = swiperInstance.activeIndex;
  var progressPercent = ((currentIndex + 1) / totalSlides) * 100;
  
  // 动态创建进度条填充元素（首次初始化时）
  if (!document.querySelector('.swiper-progress-bar-fill')) {
    document.querySelector('.swiper-progress-bar').innerHTML = '<div class="swiper-progress-bar-fill"></div>';
  }
  
  document.querySelector('.swiper-progress-bar-fill').style.width = progressPercent + '%';
}

内容的提问来源于stack exchange，提问作者Евгения