Bootstrap轮播图切换间隔由interval控制，默认5秒，可初始化时设interval:3000或HTML中data-bs-interval="3000"；动画时长需同步调整CSS transition-duration及JS逻辑。
修改 carousel 切换间隔时间（interval）
Bootstrap 轮播图默认每 5 秒切一张，这个值由 interval 控制。它不是 CSS 动画时长，而是两张幻灯片之间的等待时间——改它最直接、最常用。
实操建议：
- 初始化时传入
interval: 3000（单位毫秒），比如：$('#myCarousel').carousel({ interval: 3000 }); - 如果用 data 属性初始化，直接在 HTML 中写：
data-bs-interval="3000"（Bootstrap 5+）或data-interval="3000"（Bootstrap 4） - 注意：设为
false或0会禁用自动轮播；设为负数无效，会被忽略 - 动态修改需调用
carousel('cycle')重置计时器，否则当前间隔不会立即生效
调整切换动画持续时间（transition-duration）
用户常混淆「切换间隔」和「滑动动画快慢」。后者由 CSS 的 transition-duration 控制，影响视觉流畅度，但不改变轮播节奏。
实操建议：
- 覆盖 Bootstrap 默认的
.carousel-item过渡样式：.carousel-item { transition-duration: 0.3s; } - 只改这个值不够——Bootstrap 5+ 的
carousel.js内部硬编码了0.6s的 JS 等待逻辑，所以必须同步调整 JS 的sliding事件监听或重写slideTo方法 - 更稳妥的做法是：CSS 改成
0.3s，再在 JS 初始化时加pause: "hover"避免动画叠加错乱
禁用自动轮播后手动控制速度
有些场景需要用户触发才动，比如点击按钮才滑，这时「速度」就变成「响应延迟 + 动画时长」的组合问题。
实操建议：
- 初始化时设
interval: false，然后用carousel('next')或carousel('to', index)手动触发 - 如果按钮连点太快，
carousel会排队执行，造成卡顿。应在调用前检查$(el).hasClass('sliding')，避免重复触发 - 想实现「按住按钮加速轮播」？得自己用
setInterval调用carousel('next')，并记得在mouseleave时clearInterval
Bootstrap 版本差异导致的坑
Bootstrap 4 和 5 的 API、类名、事件名都不一样，改速度时稍不注意就失效。
常见错误现象：
- 用了
data-interval却没反应 → 你用的是 Bootstrap 5，该用data-bs-interval - JS 初始化写了
$('.carousel').carousel({ interval: 2000 })，但页面多个轮播图全被统一设置了 → 每个实例要单独初始化，别用通配符选择器批量操作 - 自定义 CSS 生效但动画卡顿 → Bootstrap 5 默认启用了
prefers-reduced-motion媒体查询，会强制降级动画，需显式覆盖：@media (prefers-reduced-motion: reduce) { .carousel-item { transition-duration: 0.3s !important; } }
真正难调的不是数字本身，而是 JS 计时器、CSS 过渡、用户交互三者在不同版本里的耦合方式——改一个地方，往往得同步动另外两个。
