Bootstrap是否支持通过data-target的多个ID同步多个轮播组件？

Bootstrap 5允许通过data-bs-target传入多个CSS选择器（包括多个ID）来同步轮播，但你的代码存在两处问题导致仅一个轮播生效：

• 两个轮播元素都重复声明了data-bs-ride属性（同时设置了data-bs-ride="false"和data-bs-ride="carousel"），属性值冲突会干扰轮播初始化逻辑。
• 部分场景下，多选择器的data-bs-target可能因解析优先级问题失效，更稳定的方案是通过JavaScript手动绑定控件事件实现同步。

方案1：修复data属性实现同步 #

先移除重复的data-bs-ride属性，确保每个轮播仅保留一个正确的属性值，同时保持data-bs-target的多选择器写法：

.carousel {
  background: gray;
}
.carousel:nth-child(2) {
  background: lightgray;
}

body button {
  background: lightblue !important;
  z-index: 2;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner" data-bs-interval="false">
    <div class="carousel-item active">
      111
    </div>
    <div class="carousel-item">
      222
    </div>
    <div class="carousel-item">
      333
    </div>
  </div>  
</div>
<div id="carouselExampleControls2" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner" data-bs-interval="false">
    <div class="carousel-item active">
      111
    </div>
    <div class="carousel-item">
      222
    </div>
    <div class="carousel-item">
      333
    </div>
  </div>  
</div>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

方案2：JavaScript手动控制同步（更可靠） #

如果方案1仍存在问题，可通过JS手动获取两个轮播实例，绑定控件的点击事件来同步切换：

.carousel {
  background: gray;
}
.carousel:nth-child(2) {
  background: lightgray;
}

body button {
  background: lightblue !important;
  z-index: 2;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner" data-bs-interval="false">
    <div class="carousel-item active">
      111
    </div>
    <div class="carousel-item">
      222
    </div>
    <div class="carousel-item">
      333
    </div>
  </div>  
</div>
<div id="carouselExampleControls2" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner" data-bs-interval="false">
    <div class="carousel-item active">
      111
    </div>
    <div class="carousel-item">
      222
    </div>
    <div class="carousel-item">
      333
    </div>
  </div>  
</div>

<button class="carousel-control-prev" type="button" id="prevBtn">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" id="nextBtn">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
  // 初始化两个轮播实例
  const carousel1 = new bootstrap.Carousel(document.getElementById('carouselExampleControls'), {
    ride: false,
    interval: false
  });
  const carousel2 = new bootstrap.Carousel(document.getElementById('carouselExampleControls2'), {
    ride: false,
    interval: false
  });

  // 绑定上一页按钮事件
  document.getElementById('prevBtn').addEventListener('click', () => {
    carousel1.prev();
    carousel2.prev();
  });

  // 绑定下一页按钮事件
  document.getElementById('nextBtn').addEventListener('click', () => {
    carousel1.next();
    carousel2.next();
  });
</script>

这个方案通过直接操作轮播实例，完全规避了data属性解析的潜在问题，同步效果更稳定。

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