如何将Bootstrap轮播指示器设为数字文本并动态更新

直接按以下步骤操作，就能替换默认指示器，实现动态更新的"当前/总数"文本编号：

1. 构建轮播HTML结构 #

去掉默认的<ol class="carousel-indicators">指示器，新增一个专门显示编号的容器，放在轮播容器内即可：

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <!-- 文本编号容器 -->
  <div class="carousel-number"></div>

  <!-- 幻灯片内容 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
    <div class="carousel-item">
      <img src="slide4.jpg" class="d-block w-100" alt="Slide 4">
    </div>
    <div class="carousel-item">
      <img src="slide5.jpg" class="d-block w-100" alt="Slide 5">
    </div>
    <div class="carousel-item">
      <img src="slide6.jpg" class="d-block w-100" alt="Slide 6">
    </div>
  </div>

  <!-- 前后控制按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

2. 给编号添加样式 #

用CSS定位编号容器，调整外观让它和轮播适配，示例是放在右上角的半透明样式：

.carousel-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  z-index: 10; /* 确保显示在幻灯片上方 */
}

3. 编写JS实现动态更新 #

借助Bootstrap轮播的slid.bs.carousel事件（切换完成后触发），结合初始化时的设置，自动更新编号：

// 获取轮播实例、编号元素和总幻灯片数
const carousel = new bootstrap.Carousel(document.getElementById('carouselExample'));
const numberEl = document.querySelector('.carousel-number');
const totalSlides = document.querySelectorAll('.carousel-item').length;

// 更新编号的通用函数
function updateNumber() {
  // Bootstrap轮播的_activeIndex从0开始，所以+1转为自然计数
  const currentSlide = carousel._activeIndex + 1;
  numberEl.textContent = `${currentSlide}/${totalSlides}`;
}

// 页面加载时先设置初始编号
updateNumber();

// 每次幻灯片切换完成后更新编号
carousel._element.addEventListener('slid.bs.carousel', updateNumber);

补充说明 #

• 以上代码适配Bootstrap 5，如果你用Bootstrap 4，只需要把实例化方式改成$('.carousel').carousel()，事件监听逻辑不变。
• 总幻灯片数是自动统计的，新增/删除幻灯片不用手动修改数字。
• 编号的位置、颜色、大小都可以通过CSS自由调整，比如改成底部居中样式只需要修改top和right为bottom和left: 50%; transform: translateX(-50%);。

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