data-bs-interval 控制轮播自动切换间隔，需设于外层容器且初始化时读取；transition-duration 必须同步修改三处 CSS 类并匹配公式：data-bs-interval ≥ transition-duration×1000+100。
data-bs-interval 控制轮播图自动切换的间隔时间，不是“动画延迟”，也不是“内容显示延迟”——它决定的是「当前页停留多久后触发下一次切换」。真正影响内容“显示出来”的快慢，是 CSS 的 transition-duration，但必须连改三处，否则会闪屏、跳变。
怎么改 data-bs-interval 控制自动轮播节奏
这个属性只在轮播初始化时读取一次，写在最外层容器上才有效：<div class="carousel slide" data-bs-interval="400">
设为 0 或 "false" 会禁用自动播放，不是“最快”。
值低于 500 容易导致用户来不及操作指示器或暂停按钮，尤其在移动端。
JS 初始化时要单独传参，不能靠通配符批量设置：new bootstrap.Carousel(document.querySelector('#myCarousel'), { interval: 400 })
为什么只改 .carousel-item 的 transition-duration 没用
Bootstrap 5.3+ 的轮播动画由三类状态协同驱动：
• .carousel-item：定义基础过渡规则（仅影响初始挂载）
• .carousel-item.active：控制当前页“保持显示”期间的 transform 和 opacity 行为
• .carousel-item-next 和 .carousel-item-prev：分别控制下一张/上一张滑入/滑出的位移与淡入淡出
漏掉任意一个，浏览器就回退到默认的 0.6s，造成视觉撕裂、闪屏或触控不同步。
必须同步覆盖的三处 CSS transition 声明
以下写法必须全部存在，且值完全一致：.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 或省略小数点
• 不要只写 transition-duration: 0.3s，它会覆盖整个 transition 声明，丢失分项控制能力
• CSS 优先级要够高，建议放在 Bootstrap CSS 之后，或加 !important
data-bs-interval 和 transition-duration 必须匹配
CSS 控动画过程，JS 控触发节奏。两者不协调，人眼看到的是“闪”，不是“快”。硬性公式：data-bs-interval ≥ transition-duration × 1000 + 100（单位毫秒）
例如：
• 动画设为 0.3s → data-bs-interval 至少设 400
• 动画设为 0.2s → data-bs-interval 至少设 300
这个约束来自 Bootstrap 内部事件节流逻辑，不是建议，是强制要求。
移动端真机测试比 DevTools 的 device toolbar 更可靠——部分 Android WebView 对 transform 过渡有延迟渲染。
