要启用bootstrap carousel淡入淡出效果，必须同时添加carousel和carousel-fade类，缺一不可；仅加carousel-fade会导致轮播js不初始化、指示器失效；fade依赖css opacity过渡，需确保.carousel-item为position: absolute且无堆叠上下文干扰。
要改 Bootstrap Carousel 的切换过渡方式，核心不是调 JS 参数，而是换 CSS 类或覆盖 transition 规则——滑动（slide）是默认行为，淡入淡出（fade）必须显式启用，自定义动画（比如缩放、Y轴位移）得靠重写 transition 和 transform 逻辑。
怎么启用 fade 淡入淡出效果
必须同时加 carousel 和 carousel-fade 两个类，缺一不可。只加 carousel-fade 会导致轮播 JS 不初始化，指示器失效、按钮无响应。
-
carousel提供基础功能（事件绑定、状态管理、导航控制） -
carousel-fade覆盖默认的transform: translateX()，改用opacity过渡 - 检查浏览器开发者工具中，
.carousel-item是否生效了transition: opacity 0.6s ease；没生效说明 CSS 未加载全（某些构建工具会剔除carousel-fade对应的 SCSS block） -
.carousel-item必须是position: absolute，且父容器不能有transform、filter或will-change，否则会创建新堆叠上下文，让opacity变化不可见
怎么把 slide 改成自定义位移（比如 Y 轴滑动）
Bootstrap 默认只支持 X 轴滑动，改 Y 轴需手动覆盖 transform 值，并确保三处 transition 同步更新——否则动画撕裂。
- 覆盖这四组选择器，全部统一用
transform: translateY()： .carousel-item { transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; }.carousel-item.active, .carousel-item-next, .carousel-item-prev { transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; }- 再加一行重置 transform：
.carousel-item-next { transform: translateY(100%); }（下一张从下方滑入） -
.carousel-item-prev { transform: translateY(-100%); }（上一张从上方滑出） - 单位必须统一（全用
%或全用vh），混用会导致计算抖动
为什么改了 transition 还是硬切、不动画
常见原因不是代码写错，而是 CSS 优先级不够或 DOM 结构干扰。
- Bootstrap 的默认样式优先级高，建议把自定义 CSS 放在
bootstrap.min.css之后，或加!important（如transition: transform 0.3s !important;） - 如果轮播外层包裹了
display: flex容器，.carousel-inner的overflow: hidden可能被破坏，导致transform溢出可见 - 图片用了
loading="lazy"但未设宽高占位，DOM 渲染完成前.carousel-item高度为 0，动画起始位置异常 - 移动端真机测试比 DevTools 模拟更准——部分 Android WebView 对
transform有延迟渲染，尤其在复杂页面里
data-bs-interval 和 transition-duration 怎么配才不闪屏
两者必须匹配，否则人眼看到的是“闪”，不是“快”。这不是建议，是 Bootstrap 内部节流逻辑决定的硬约束。
- 公式：
data-bs-interval≥transition-duration × 1000 + 100（单位毫秒） - 例如你设了
transition-duration: 0.25s，那么data-bs-interval至少为350 -
data-bs-interval="0"或false是禁用自动播放，不是“最快”；设负数会被忽略 - JS 初始化时写
{ interval: 350 }，和 HTML 中data-bs-interval="350"效果等价，但后者仅在首次初始化时读取一次
最易被忽略的点：所有自定义动画都依赖 .carousel-item 的 position: absolute 和干净的堆叠上下文——一旦外层有 transform 或 opacity，整个 fade 或自定义 transform 就会失效，且很难 debug。
