轮播图加 carousel-fade 仍硬切，主因是 CSS 层叠或 DOM 结构干扰：需同时保留 carousel 类、确保 .carousel-item 为 position: absolute、检查 transition/opacity 是否生效、覆盖样式时须带 .carousel-fade 前缀。
轮播图加了 carousel-fade 还是硬切？检查这三处
直接加 carousel-fade 类却没效果，大概率不是 JS 问题，而是 CSS 层叠或 DOM 结构被干扰。Bootstrap 的 fade 动画纯靠 CSS 驱动，不依赖 JS。
- 确认是否同时写了
carousel和carousel-fade——只写后者，整个轮播逻辑（包括指示器响应、键盘控制）会失效 - 打开开发者工具，选中任意一个
.carousel-item，看 computed 样式里有没有生效transition: opacity 0.6s ease和opacity: 0；没有说明 Bootstrap 的 carousel CSS 没加载全（某些构建工具会剔除carousel-fade对应的 SCSS block） - 检查
.carousel-item是否被覆盖了position或display：它必须是position: absolute才能层叠，如果父容器设了display: flex或外层加了transform，可能破坏堆叠上下文，导致 opacity 变化不可见
改 fade 动画时长和缓动函数，别碰 JS 配置项
Bootstrap 内置的 fade 动画参数（0.6s、ease）写死在 CSS 里，没有 data 属性或 JS 方法可调。想改就得覆盖样式，且必须带 .carousel-fade 前缀，避免污染其他轮播。
- 过渡效果由非 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);
}
视频轮播加 fade 效果，图片和 <video></video> 要统一处理
轮播里混用 <img alt="如何实现Bootstrap轮播图的淡入淡出切换效果_覆盖CSS的slide动画为fade" > 和 <video></video> 时，常见问题是视频元素默认有 display: inline 或自带 poster 行为，导致 opacity 过渡不生效。
- 给所有轮播内容（包括
<video></video>）加class="d-block w-100"，确保显示模式一致 - 视频建议加
preload="none"，避免未激活项预加载影响性能 - 若视频有 poster 图，它本身不响应 opacity ——需要额外包裹一层
<div> 并把 opacity 应用到该容器上 <h3>用 JS 切换轮播项时，fade 动画仍不触发？</h3> <p>调用 <code>myCarousel.carousel('next')或bootstrap.Carousel.getInstance(el).to(2)不会自动注入动画逻辑，它只负责切换active类。动画是否发生，完全取决于 DOM 上是否存在carousel-fade和对应 CSS。立即学习“前端免费学习笔记（深入）”；
- 动态插入的轮播项（比如 AJAX 加载后 append），必须手动补上
carousel-fade类，否则新项只有 slide 行为 - 不要依赖
slid.bs.carousel事件去“补动画”，这个事件只是通知切换完成，不参与过渡过程 - 验证方式：切换后立刻检查目标
.carousel-item是否同时拥有active和carousel-fade父容器类
.carousel-item在同一位置层叠 + opacity 交叠，任何破坏绝对定位、z-index 顺序或 opacity 继承链的操作，都会让 fade 失效——这点比 JS 行为更底层，也更容易被忽略。 - 动态插入的轮播项（比如 AJAX 加载后 append），必须手动补上
