Bootstrap Carousel自动播放设置 Bootstrap如何让轮播图停止自动播放-Bootstrap教程-PHP中文网

data-bs-ride="carousel"仅控制初始化时是否自动播放，运行时启停必须用carousel.pause()和carousel.cycle()等js方法；移除该属性后需手动初始化实例，否则无交互功能。

data-bs-ride="carousel" 是自动播放的开关，但关了它不等于能随时暂停

bootstrap 5 轮播图是否自动播放，最直接的控制点就是 data-bs-ride="carousel"。加上它，页面加载时就自动启动轮播；去掉它，轮播图就静止在初始状态，只响应手动操作。

但要注意：这个属性只管「初始化时是否启动」，它不是运行时的播放/暂停开关。你想在用户交互中动态控制（比如鼠标悬停暂停、播完最后一张停住），必须用 JS 方法，不能只靠删属性。

data-bs-interval="3000 可设切换间隔，但仅当 data-bs-ride 存在时才生效
移除 data-bs-ride 后，得手动调用 new bootstrap.Carousel(...) 才能启用 JS 控制能力
如果用了 data-bs-ride 却又想中途暂停，必须用 carousel.pause()，而不是改 HTML 属性

用 carousel.pause() 和 carousel.cycle() 实现运行时启停

一旦轮播实例创建完成（无论靠 data-bs-ride 还是 JS 初始化），你就能拿到它的实例对象，调用原生方法控制行为。

常见场景代码示例：

const myCarousel = document.querySelector('#myCarousel');
const carousel = new bootstrap.Carousel(myCarousel, {
  interval: 4000,
  wrap: true
});
<p>// 鼠标悬停暂停
myCarousel.addEventListener('mouseenter', () => carousel.pause());</p><p>// 鼠标离开恢复
myCarousel.addEventListener('mouseleave', () => carousel.cycle());</p><p>// 播到最后一张后永久暂停（需监听事件）
myCarousel.addEventListener('slid.bs.carousel', function (e) {
const items = this.querySelectorAll('.carousel-item');
if (e.to === items.length - 1) {
carousel.pause();
}
});</p>

⚠️ 关键点：slid.bs.carousel 是切换「完成之后」触发的事件，e.to 是目标索引；别用 slide.bs.carousel（切换开始前），否则判断会错乱。