为什么我的Bootstrap轮播图幻灯片垂直堆叠无法正常切换播放

核心问题点 #

• 你使用的是Bootstrap 5版本，框架要求所有组件交互相关的自定义属性必须携带data-bs-前缀，你代码中使用的data-interval是Bootstrap 4的旧写法，不兼容Bootstrap 5
• Codeply平台如果已经提前预装了Bootstrap相关依赖，你在代码中再次手动引入Bootstrap的CSS和JS CDN链接，会导致资源重复加载冲突，触发轮播组件失效，这也是同一份代码在其他平台/本地运行正常的核心原因

修复方案 #

1. 先删除你代码中手动引入的Bootstrap CSS、JS CDN链接，直接使用Codeply预装的依赖避免冲突
2. 将轮播标签上的data-interval="1000"改为data-bs-interval="1000"
3. 如果调整后仍未生效，可以添加一段手动初始化轮播的JS代码

修正后完整代码 #

CSS代码 #

.carousel-item {
  height: 150px;
}

HTML代码 #

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
    </div>
    <div class="carousel-item" style="background-color: blue;">
      <img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
    </div>
  </div>
</div>

可选JS初始化代码（上述调整后仍不生效可添加） #

const carouselElement = document.querySelector('#carouselExampleSlidesOnly')
const carousel = new bootstrap.Carousel(carouselElement, {
  interval: 1000,
  ride: 'carousel'
})

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