必须同时添加 carousel 和 carousel-fade 类，且确保 .carousel-item 有 position: absolute、CSS 加载完整、无堆叠上下文干扰，才能实现淡入效果。
Bootstrap 轮播图加 carousel-fade 类后没淡入效果？不是 bug，是漏了关键前提——必须同时保留 carousel 类，且 CSS 和定位上下文要配合到位。
必须同时写 carousel 和 carousel-fade
carousel-fade 不是独立功能类，它只是覆盖默认动画的 CSS 修饰符。只加 carousel-fade 会丢失轮播逻辑：JS 不初始化、指示器不响应、左右按钮失效。
-
carousel提供 JS 初始化、事件绑定、基础布局结构 -
carousel-fade仅负责把transform: translateX()换成opacity过渡 - 正确写法：
<div class="carousel carousel-fade"> —— 缺一不可 <h3>为什么加了类但还是“咔嚓”跳变？</h3> <p>常见失效原因集中在三处，按优先级排查：</p> <ul> <li>CSS 文件不完整：某些构建工具或 CDN 精简包会剔除 <code>.carousel-fade相关规则（它在源码中是独立@include块），检查浏览器开发者工具里是否加载了.carousel-fade .carousel-item { transition: opacity ... } -
.carousel-item没有position: absolute：轮播项必须层叠才能看到 opacity 变化，若父容器用了display: flex或grid，会破坏绝对定位流 - 堆叠上下文被干扰：比如
.carousel-item外层包裹了transform、filter或will-change，导致其子元素无法正确层叠
想改淡入时长或缓动函数？只能覆盖 CSS
Bootstrap 内置的 fade 动画参数（0.6s ease）不可通过 data 属性或 JS 配置修改，必须用 CSS 覆盖：
.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;
}
注意两点：
- 必须带
.carousel-fade前缀，否则会影响所有轮播项 - 过渡效果由非 active 项的
transition控制，所以不要只改.active的 opacity，要确保通用.carousel-item有 transition 声明
Bootstrap 4/5 中 .slide 类已废弃？
不是废弃，而是语义变了：.slide 是默认行为，无需显式添加。Bootstrap 4+ 的轮播容器只要带 carousel 类，就默认启用滑动动画；加 carousel-fade 才是「切换动画类型」的动作。很多人误以为要删 .slide 才能 fade，其实根本不存在这个类——旧文档或 Bootstrap 3 示例里的 .slide 在 4+ 中已合并进 carousel 基类逻辑里。
最易被忽略的一点：轮播项内容（比如 <img alt="Bootstrap 轮播图淡入淡出效果 CarouselFade" >）如果本身设置了 display: inline 或被 vertical-align 干扰，也会导致 opacity 变化不可见——建议统一加 class="d-block" 保证显示行为可控。
