如何创建带进度条的Swiper滑块？

要实现你图中那种带进度条的滑块，我们可以基于Swiper的事件系统和自定义分页来改造，以下是具体实现步骤：

1. 调整HTML结构 #

先把原代码里的data-slick-index替换成通用的data-slide-index，避免和其他插件属性混淆，确保分页项和幻灯片一一对应：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/slider/1.jpg"></div>
    <div class="swiper-slide"><img src="img/slider/2.jpg"></div>
    <div class="swiper-slide"><img src="img/slider/3.jpg"></div>
  </div>
  <!-- 自定义分页容器 -->
  <div class="swiper-pagination custom-pagination">
    <div data-slide-index="0">
      <h3>slide 1</h3>
      <span class="progressBar"></span>
    </div>
    <div data-slide-index="1">
      <h3>slide 2</h3>
      <span class="progressBar"></span>
    </div>
    <div data-slide-index="2">
      <h3>slide 3</h3>
      <span class="progressBar"></span>
    </div>
  </div>
</div>

2. 编写基础CSS样式 #

给进度条和分页项设置样式，确保进度条默认宽度为0，激活时展示动画效果：

/* 自定义分页容器布局 */
.custom-pagination {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.custom-pagination > div {
  text-align: center;
  width: 100px;
}

.custom-pagination h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

/* 进度条基础样式 */
.progressBar {
  display: block;
  width: 0;
  height: 3px;
  background-color: #007bff;
  transition: width 0.1s linear;
}

/* 当前激活幻灯片的分页高亮 */
.custom-pagination .active h3 {
  color: #007bff;
}

3. 配置Swiper并实现进度条逻辑 #

开启自动轮播，监听Swiper专属事件来实时更新进度条宽度，幻灯片切换时重置进度状态：

const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
  autoplay: {
    delay: 3000, // 每张幻灯片停留3秒，可自行调整
    disableOnInteraction: false, // 用户交互后保持自动轮播
  },
});

// 获取所有进度条和分页元素
const progressBars = document.querySelectorAll('.progressBar');
const paginationItems = document.querySelectorAll('.custom-pagination > div');

// 重置所有进度条状态
function resetProgressBars() {
  progressBars.forEach(bar => bar.style.width = '0%');
  paginationItems.forEach(item => item.classList.remove('active'));
}

// 计算并更新当前幻灯片的进度条
function updateProgressBar(remainingTime, totalDelay) {
  const progress = ((totalDelay - remainingTime) / totalDelay) * 100;
  const activeIndex = swiper.realIndex; // loop模式下取真实索引
  progressBars[activeIndex].style.width = `${progress}%`;
}

// 幻灯片切换时重置进度条，标记当前激活分页
swiper.on('slideChange', () => {
  resetProgressBars();
  const activeIndex = swiper.realIndex;
  paginationItems[activeIndex].classList.add('active');
});

// 监听自动轮播剩余时间，实时更新进度
swiper.on('autoplayTimeLeft', (_, timeLeft, delay) => {
  updateProgressBar(timeLeft, delay);
});

// 初始化时激活第一个分页项
paginationItems[swiper.realIndex].classList.add('active');

关键说明 #

• autoplayTimeLeft是Swiper提供的专属事件，能精准获取当前幻灯片的剩余展示时间，以此计算进度条的宽度比例。
• 开启loop模式后，必须用swiper.realIndex获取真实幻灯片索引，避免虚拟复制的幻灯片干扰。
• 进度条的平滑动画通过transition属性实现，也可根据需求换成transform或其他动画方式。

内容的提问来源于stack exchange，提问作者Артём Столяр