必须同时修改.carousel-item、.carousel-item.active、.carousel-item-next/.carousel-item-prev三个选择器的transition声明（均含transform和opacity，时长一致），并确保data-bs-interval≥transition-duration×1000+100ms，否则会出现闪屏、跳变或触控不同步。
改 transition-duration 不起作用，或者改完闪屏、跳变、触控不同步——不是你 CSS 写错了，是只改了一个地方，而 Bootstrap 5.3+ 的轮播动画由三类状态协同驱动，漏掉任意一个都会出问题。
必须同时覆盖三个 CSS 选择器的 transition 声明
Bootstrap 5.3+ 不再靠单个 .carousel-item 控制全部动画。JS 切换时会动态添加/移除 .active、.next、.prev 类，浏览器分别按这些类渲染过渡效果。漏掉任何一个，就会回退到默认的 0.6s，造成视觉撕裂。
-
.carousel-item：定义基础过渡规则（初始挂载时生效） -
.carousel-item.active：控制当前页“保持显示”期间的 opacity 和 transform 行为 -
.carousel-item-next和.carousel-item-prev：分别控制下一张/上一张滑入/滑出的位移与淡入淡出
这四者必须用完全一致的 transition 值，不能只写 transition-duration：
.carousel-item {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
注意：transform 和 opacity 必须同时声明；单位统一用 s（如 0.3s），别混用 ms 或省略小数点。
data-bs-interval 必须 ≥ transition-duration × 1000 + 100
CSS 控动画过程，JS 控触发节奏。两者不匹配，人眼看到的是“闪”，不是“快”。这个约束是 Bootstrap 内部事件节流逻辑决定的硬性要求，不是建议。
- 动画设为
0.3s→data-bs-interval至少设400（毫秒） - 动画设为
0.2s→data-bs-interval至少设300 - 设成
0或"false"会禁用自动播放，不是“最快”
这个属性必须写在最外层容器上：<div class="carousel slide" data-bs-interval="400">。写在 <code>.carousel-inner 或 .carousel-item 里无效。
JS 初始化时 interval 参数经常不生效？先看初始化方式
data-bs-interval 属性优先级高于 JS 配置项。如果 HTML 中已存在该属性，new bootstrap.Carousel(element, { interval: 2000 }) 会被忽略。
- 想用 JS 控制，得先移除属性：
element.removeAttribute('data-bs-interval') - 动态修改运行中的轮播间隔，不能直接改
_config.interval，必须先carousel.pause()，再更新配置，最后carousel.cycle() - 更稳妥的做法是销毁重建：
carousel.dispose()后重新初始化
另外，data-bs-ride="carousel" 会在 DOMContentLoaded 时自动初始化一次，如果你的 JS 执行晚了，就可能和它冲突。
移动端 touch 滑动和键盘操作是否同步？
纯 CSS 修改对鼠标悬停、左右箭头、ArrowLeft/ArrowRight 都有效，但 touch 拖拽（swipe）依赖底层 touchstart/touchend 节流逻辑，不受 transition-duration 影响。
- 如果手指滑动时动画变慢或不同步，先确认引入的是
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 检查是否有第三方库（如 hammer.js）劫持了 touch 事件
- 低于
300毫秒的data-bs-interval不建议设，浏览器定时器精度限制会导致跳帧，尤其在低端设备上
真正难的不是改哪几行 CSS，而是理解这三类状态如何被 JS 动态切换、浏览器如何分别渲染——漏掉任何一个，动画就断了。
