Bootstrap轮播通过单选框切换多组carousel-inner后滑动失效如何解决？

问题根因 #

• 单个Bootstrap Carousel组件初始化时，只会绑定容器内第一个carousel-inner的滑动逻辑，你在同一个Carousel容器内放了3个carousel-inner，切换显示另外两个的时候，这两个并没有被轮播组件识别，自然无法正常滑动。
• 你共用了一套轮播指示器，但3组轮播的滑块数量都是2个，指示器却配置了3个，还会出现索引不匹配的问题。

最优解决方案 #

直接将3组轮播内容拆成3个独立的Carousel容器，每个单独初始化，单选框切换时隐藏/显示整个Carousel容器，同时手动调用轮播启动方法即可，修改成本低且不易出错。

修改后的CSS代码 #

#carousel1 {
    display: block;
}
#carousel2, #carousel3 {
    display: none;
}

修改后的HTML代码 #

<input type="radio" id="a" name="e" value="a" checked>
<input type="radio" id="b" name="e" value="b">
<input type="radio" id="c" name="e" value="c">
<label for="a">a</label>
<label for="b">b</label>
<label for="c">c</label>

<!-- 第一组轮播 -->
<div id="carousel1" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel1" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">a</div>
    <div class="carousel-item">b</div>
  </div>
</div>

<!-- 第二组轮播 -->
<div id="carousel2" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel2" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel2" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">b</div>
    <div class="carousel-item">c</div>
  </div>
</div>

<!-- 第三组轮播 -->
<div id="carousel3" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel3" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel3" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">c</div>
    <div class="carousel-item">d</div>
  </div>
</div>

修改后的JS代码 #

$('input[type=radio][name=e]').change(function () {
  // 先隐藏所有轮播容器
  $('#carousel1, #carousel2, #carousel3').hide();
  const targetId = this.value;
  if (targetId === 'a') {
    $('#carousel1').show().carousel('cycle');
  } else if (targetId === 'b') {
    $('#carousel2').show().carousel('cycle');
  } else if (targetId === 'c') {
    $('#carousel3').show().carousel('cycle');
  }
});

注意事项 #

如果使用Bootstrap 5，需要确保已正确引入Bootstrap JS、Popper.js依赖，使用的JQuery版本要和Bootstrap版本兼容。

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