如何使用Swiper.js同时显示进度条与自定义分页？

你当前代码里的问题很明确：同一个pagination属性在JS对象里被定义了两次，JS里重复的对象键会被后面的覆盖，所以只能显示最后配置的那个分页。要同时展示两种分页，得用下面的方法：

方案一：配置多分页容器（推荐） #

Swiper支持数组形式的分页配置，只要给两种分页各建一个独立的容器就行：

1. 先在HTML里加两个分页容器：

<!-- 进度条分页容器 -->
<div class="swiper-pagination-progressbar"></div>
<!-- 数字分页容器 -->
<div class="swiper-pagination-numbers"></div>

2. 修改JS配置，把两个分页放进数组：

var swiper = new Swiper(".mySwiper", {
  keyboard: {
    enabled: true,
  },
  pagination: [
    // 进度条分页配置
    {
      el: ".swiper-pagination-progressbar",
      type: "progressbar",
    },
    // 数字分页配置
    {
      el: ".swiper-pagination-numbers",
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + "</span>";
      },
    }
  ],
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  mousewheel: {
    releaseOnEdges: true,
  },
});

这样两个分页会各自绑定到对应的容器，互不干扰，都能正常工作。

方案二：手动实现进度条（兼容旧版本Swiper） #

如果你的Swiper版本不支持数组形式的分页配置，可以手动做进度条，监听Swiper事件更新：

1. HTML添加容器：

<div class="swiper-pagination-progressbar"></div>
<div class="swiper-pagination-numbers"></div>

2. JS配置+事件监听：

var swiper = new Swiper(".mySwiper", {
  keyboard: {
    enabled: true,
  },
  // 先配置数字分页
  pagination: {
    el: ".swiper-pagination-numbers",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  mousewheel: {
    releaseOnEdges: true,
  },
});

// 获取进度条元素，监听滑动事件更新宽度
const progressBar = document.querySelector('.swiper-pagination-progressbar');
swiper.on('progress', function(swiper) {
  progressBar.style.width = swiper.progress * 100 + '%';
});
swiper.on('slideChange', function(swiper) {
  const progress = (swiper.activeIndex / (swiper.slides.length - 1)) * 100;
  progressBar.style.width = progress + '%';
});

3. 给进度条加基础样式：

.swiper-pagination-progressbar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #007aff;
  width: 0;
}

内容的提问来源于stack exchange，提问作者Klaus Muller