必须同时加carousel和carousel-fade类，缺一不可；只加后者会导致JS不初始化、指示器按钮失效；“咔嚓”硬切是CSS层叠或DOM结构问题，需检查transition是否生效、.carousel-item是否absolute定位、内容是否d-block，且须用.carousel-fade前缀覆盖transition样式。
必须同时加 carousel 和 carousel-fade 两个类，缺一不可；只加后者会导致轮播 JS 完全不初始化，指示器、按钮、自动播放全部失效。
为什么加了 carousel-fade 还是“咔嚓”硬切？
这不是 JS 问题，而是 CSS 层叠或 DOM 结构干扰导致的。Bootstrap 的 fade 完全靠 CSS 驱动，不依赖 JS。排查优先级如下：
- 检查浏览器开发者工具里，任意一个
.carousel-item的 computed 样式中是否生效了transition: opacity 0.6s ease和opacity: 0—— 没有说明 Bootstrap 的 CSS 没加载全（某些构建工具会剔除.carousel-fade对应的 SCSS block） - 确认
.carousel-item是position: absolute：如果父容器用了display: flex或外层加了transform/filter/will-change，会破坏堆叠上下文，opacity变化就不可见 -
.carousel-item内容（比如<img>）必须加class="d-block w-100"，避免display: inline或vertical-align干扰定位
怎么改淡入时长和缓动函数？
Bootstrap 内置的 fade 参数（0.6s、ease）写死在 CSS 里，没有 data 属性或 JS 方法可调，只能覆盖样式：
.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的.carousel-item控制，不是.active本身——所以要改.carousel-fade .carousel-item的transition，而不是只写.active
视频轮播怎么让 poster 图也淡入淡出？
视频元素的 poster 图本身不响应 opacity，得用一层 <div> 包裹并把 opacity 应用到该容器上：
<div class="carousel-item">
<div class="d-block w-100">
<video class="w-100" preload="none" ...>
<source src="...">
</video>
</div>
</div>
同时建议设 preload="none"，避免未激活项预加载卡住过渡。
最易被忽略的是：轮播项内容（比如图片）若被外层 transform、filter 或 will-change 包裹，会直接破坏绝对定位堆叠上下文，导致 opacity 动画完全不可见——这种问题无法靠 JS 修复，必须从 CSS 层级清理干扰源。
