问题出在漏写必需的carousel基类，必须同时使用class="carousel carousel-fade"；还需确保.carousel-item为position: absolute、父容器.carousel-inner为position: relative，并统一内容为块级显示。

加了 carousel-fade 类却还是硬切，问题出在哪？

不是 JS 没生效，而是 CSS 层叠或 DOM 结构被干扰。Bootstrap 的 fade 动画纯靠 CSS 驱动，不依赖 JS 逻辑。最常踩的坑是：只写了 carousel-fade，漏掉了必需的 carousel 基类。

• 必须同时写 class="carousel carousel-fade"——carousel 提供 JS 初始化、指示器响应、键盘控制；carousel-fade 只负责覆盖动画样式
• 检查浏览器开发者工具中任意一个 .carousel-item 的 computed 样式：有没有 transition: opacity 0.6s ease 和 opacity: 0？没有说明 Bootstrap 的 .carousel-fade CSS 规则根本没加载（某些构建工具会剔除该 SCSS block）
• .carousel-item 必须是 position: absolute 才能层叠显示，如果父容器设了 display: flex 或外层加了 transform，会破坏堆叠上下文，导致 opacity 变化不可见

.carousel-item 的定位和显示方式为什么关键？

淡入淡出的前提是多个 .carousel-item 在同一位置层叠，靠 opacity 控制显隐。一旦定位失效，它们就变成文档流里的并列元素，“淡”就无从谈起。

• 确保 .carousel-item 有 position: absolute; top: 0; left: 0; width: 100%，且父容器 .carousel-inner 是 position: relative
• 轮播内容（<img>、<video></video>）必须统一为块级显示：加 class="d-block w-100"，否则 <img> 默认 inline、<video></video> 默认 inline-block，会破坏垂直对齐和 opacity 过渡
• 视频的 poster 图不响应 opacity ——得用额外 <div> 包裹整个 <code><video></video>，再把 opacity 应用到该容器上

  怎么改淡入时长和缓动函数？

  Bootstrap 内置的 fade 参数（0.6s ease）写死在 CSS 里，没有 data 属性或 JS 方法可调。想改，只能覆盖样式，且必须带 .carousel-fade 前缀，避免污染其他轮播。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 过渡效果由非 .active 的 .carousel-item 控制，不是 .active 本身——所以要改 .carousel-fade .carousel-item 的 transition
  • .carousel-fade .carousel-item.active 只需保证 opacity: 1，不用重复写 transition
  • 示例：延长淡入时间并换缓动函数

  .carousel-fade .carousel-item {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .carousel-fade .carousel-item.active {
    opacity: 1;
  }

  JS 主动切换时 fade 动画不触发？

  调用 myCarousel.carousel('next') 或 bootstrap.Carousel.getInstance(el).to(2) 不会“触发”动画逻辑，它只负责切换 .active 类。动画是否发生，完全取决于 DOM 上是否存在 .carousel-fade 修饰类 + 对应 CSS 是否生效。

  • 只要 .carousel-fade 类在、CSS 加载全、.carousel-item 定位正确，JS 切换后自然触发 fade
  • 如果仍无效，优先排查 computed 样式里 transition 和 opacity 是否被其他规则覆盖（比如某个全局重置样式写了 * { transition: none !important }）
  • 注意：轮播项内若用了 filter、backdrop-filter 或 will-change: transform，也可能干扰 opacity 渲染

  实际项目里最容易被忽略的，是轮播项内容自身的显示行为——<img> 默认 inline、<video></video> 自带 poster、外层包裹的 <div> 被设了 <code>display: flex……这些都会让 opacity 失效，而不是“动画没配对”。