Bootstrap v5 Carousel添加slide类仍淡入而非滑动的问题求助

可能原因及修复方案： #

1. 确认Bootstrap CSS完整引入 #

Bootstrap轮播的滑动效果依赖CSS中.carousel.slide .carousel-item的transform与transition属性实现。如果未正确引入完整的Bootstrap CSS，或是自定义CSS在Bootstrap CSS之前引入，会导致滑动样式失效，自动 fallback 为淡入效果。

确保页面头部按以下顺序引入：

<!-- 先引入Bootstrap核心CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- 再引入自定义样式（如有） -->
<link href="your-custom-style.css" rel="stylesheet">

2. 排查自定义样式覆盖问题 #

若你的自定义CSS中存在类似如下代码，会强制覆盖Bootstrap的滑动过渡逻辑：

.carousel-item {
  transition: opacity 0.6s ease !important;
}

删除这类强制修改过渡属性的代码，或调整样式优先级让Bootstrap默认样式生效。

3. 确认Bootstrap JS正确引入 #

轮播的交互逻辑需要Bootstrap JS支持，确保在页面底部引入：

<!-- 推荐引入包含Popper的完整Bootstrap JS -->
<script src="bootstrap.bundle.min.js"></script>

4. 检查轮播结构正确性 #

你的代码结构本身无问题，但需注意：

• 仅保留一个.carousel-item带有active类（你的代码已满足）
• 不要给.carousel或.carousel-item额外添加fade类（该类会启用淡入效果，与slide类互斥）

修复后完整示例代码 #

<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" style="background-color: blue;">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" 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="#testimonials-carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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