Bootstrap 5点击前后控制按钮实现两个carousel轮播同步滑动问题

开发者阿泽

2026-9-24

解决方案

你之前设置data-bs-target=".carousel"未生效的原因：Bootstrap 5原生的轮播控制属性仅支持控制单个目标元素，当你传入类选择器时，只会匹配页面中第一个符合条件的轮播组件，无法同时控制多个。

你可以通过几行JS代码实现多轮播同步效果，你的代码中两个轮播都已经添加了carousel-sync类，直接复用该类选择器即可：

步骤1：修改轮播控制按钮属性

把原来控制按钮的data-bs-target=".carousel"改回绑定右侧轮播的ID即可：

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

步骤2：添加同步JS代码

在页面底部（引入Bootstrap 5 JS之后）添加以下代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有需要同步的轮播元素
  const syncCarousels = document.querySelectorAll('.carousel-sync');
  // 初始化所有轮播实例
  const carouselInstances = Array.from(syncCarousels).map(el => new bootstrap.Carousel(el));

  syncCarousels.forEach((carousel, currentIndex) => {
    // 监听轮播滑动事件
    carousel.addEventListener('slide.bs.carousel', function(e) {
      const targetSlideIndex = e.to;
      // 让其余同步轮播跳转到对应索引位置
      carouselInstances.forEach((instance, idx) => {
        if (idx !== currentIndex) {
          instance.to(targetSlideIndex);
        }
      });
    });
  });
});