bootstrap 4+ 轮播图需同时添加 carousel 和 carousel-fade 类才能启用淡入淡出效果，仅加 carousel-fade 会导致功能失效；常见无效原因包括 css 未加载、.carousel-item 定位异常或显示方式干扰堆叠上下文。
bootstrap 4+ 轮播图默认不支持 fade，必须手动加 carousel-fade 类
bootstrap 4 及之后版本（包括 5）的轮播图默认是滑动（slide）动画，fade 效果不是开箱即用的——它被设计为一个可选修饰类，而非内置行为。很多人直接复制旧版 bootstrap 3 的写法，却忘了加这个类，结果动画还是“咔嚓”跳变。
正确做法很简单：在 carousel 容器上同时声明两个类：carousel carousel-fade。缺一不可。
-
carousel是功能基类，提供轮播逻辑和基础样式 -
carousel-fade是纯 CSS 修饰类，它覆盖了默认的transform: translateX()动画，改用opacity+transition - 如果只写
carousel-fade不写carousel，整个轮播会完全失效（无 JS 初始化、无指示器响应）
为什么加了 carousel-fade 还没效果？检查这三处
常见“加了类但没淡入”的原因，基本都卡在这几个地方：
- 没引入 Bootstrap 的完整 CSS 文件 —— 某些精简打包或自定义构建可能剔除了
.carousel-fade相关规则（它在carousel.scss里是独立 block，非核心必选） -
.carousel-item缺少position: absolute或被其他样式覆盖（比如父容器设了display: flex），导致多个 item 无法层叠，opacity 变化就不可见 - 图片或内容本身设置了
display: block以外的显示方式（如inline），或外层包裹了干扰定位的元素，破坏了绝对定位堆叠上下文
快速验证：打开浏览器开发者工具，选中一个 .carousel-item，看 computed 样式里是否生效了 opacity: 0 和 transition: opacity 0.6s ease —— 没有就是 CSS 没加载或被覆盖。
carousel-fade 的 CSS 动画参数不能直接改，得用覆盖样式
Bootstrap 内置的 fade 动画时长是 0.6s，缓动函数是 ease，这些值写死在 CSS 里，没有 data 属性或 JS 配置项可调。想改就得自己覆盖：
/* 覆盖默认 fade 动画时长与缓动 */
.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前缀，否则会污染所有轮播项 - 不要只改
.carousel-item.active的 opacity，因为非 active 项默认 opacity 是 0，但过渡效果由非 active 项的 transition 控制（Bootstrap 把 transition 放在通用.carousel-item上）
移动端手指滑动会破坏 fade 效果，慎用 touch 插件
原生 Bootstrap 轮播图在移动端只响应点击/箭头，不支持手势滑动；一旦你引入 jquery.touchSwipe 或类似插件来增强滑动手势，它们通常会强制触发 slide 类型切换（通过 prev/next 方法），从而绕过 fade 的 CSS 规则，回到生硬跳变。
如果你既要 fade，又要手势滑动，有两个现实选择：
- 放弃手势，靠指示器或按钮控制（最稳）
- 换用纯 CSS/JS 实现的 fade 轮播（比如用
opacity+setInterval+ class 切换），彻底脱离 Bootstrap 的 carousel JS 逻辑
别指望在保留 data-ride="carousel" 的前提下，靠 patch JS 来“修复” touch 和 fade 的兼容性——它们底层动画机制冲突，修起来比重写还费劲。
