本文介绍如何通过配置 interval: false 参数，彻底禁用 bootstrap carousel 的自动轮播行为，使其仅响应手动点击左右控制按钮或键盘操作。
本文介绍如何通过配置 interval: false 参数，彻底禁用 bootstrap carousel 的自动轮播行为，使其仅响应手动点击左右控制按钮或键盘操作。
Bootstrap 内置的 .carousel() 插件默认启用自动轮播（通常每 5 秒切换一次），但在许多实际场景中（如产品展示、教学演示或表单引导页），我们更希望用户完全掌控切换节奏。此时，只需在初始化轮播组件时显式设置 interval: false 即可关闭自动播放。
以下是一个完整、可直接运行的示例：
<!-- HTML 结构（精简版） -->
<div id="myCarousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="item active">
<img src="https://unsplash.it/g/1200/300?x-oss-process=image/resize,p_40" alt="Slide 1"><div class="carousel-caption">Some Caption 1 text</div>
</div>
<div class="item">
<img src="https://unsplash.it/1200/300?x-oss-process=image/resize,p_40" alt="Slide 2"><div class="carousel-caption">Different Caption 2 text</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
// JavaScript 初始化：禁用自动播放
$(document).ready(function() {
$('#myCarousel').carousel({
interval: false // 关键配置：设为 false 或 0 均可停用
});
});
⚠️ 注意事项：
- data-ride="false" 是必需的——它阻止 Bootstrap 在 DOM 加载时自动初始化轮播（否则会覆盖你的自定义配置）；
- interval: false 是官方推荐写法（优于 interval: 0），语义清晰且兼容性更好；
- 若使用 Bootstrap 5+，请改用 data-bs-interval="false" 属性或通过 new bootstrap.Carousel(..., { interval: false }) 实例化；
- 禁用自动播放后，轮播仍完全支持键盘方向键（← →）、触摸滑动（需额外引入 touch 插件）及 JS 方法调用（如 .carousel('next')）。
总结：只需两步——移除 data-ride="carousel" 并通过 JS 显式初始化并传入 { interval: false }，即可获得完全受控的手动轮播体验，兼顾可访问性与交互自由度。
