如何停止Bootstrap轮播组件的自动轮播？Bootstrap是否内置解决方案？

针对你提供的Bootstrap轮播代码，这里给你介绍几种最常用的内置解决办法：

1. 直接通过HTML属性禁用自动播放 #

你代码里的data-bs-ride="carousel"属性是用来让轮播在页面加载完成后自动启动滑动的。如果想一开始就停止自动滑动，有两种简单的HTML属性调整方式：

方式一：添加禁用间隔属性 #

给轮播容器加上data-bs-interval="false"，直接禁用自动切换的时间间隔：

<div id="carouselExampleControls" class="carousel slide" data-bs-interval="false">
  <!-- 轮播内容和控制按钮保持不变 -->
</div>

方式二：移除自动启动属性 #

直接删掉data-bs-ride="carousel"，轮播就不会在页面加载时自动启动，但仍支持手动点击控制按钮切换：

<div id="carouselExampleControls" class="carousel slide">
  <!-- 轮播内容和控制按钮保持不变 -->
</div>

2. 通过JavaScript动态控制停止/恢复 #

如果需要在页面运行过程中动态调整轮播的自动滑动状态，可以利用Bootstrap提供的轮播实例方法：

停止自动滑动 #

// 获取轮播元素
const carouselEl = document.getElementById('carouselExampleControls');
// 初始化轮播实例（若未初始化）
const carousel = new bootstrap.Carousel(carouselEl);

// 调用pause()方法停止自动滑动
carousel.pause();

恢复自动滑动 #

如果之后需要重新开启自动轮播，只需调用cycle()方法：

carousel.cycle();

初始化时直接禁用自动播放 #

也可以在创建轮播实例时，通过配置项直接禁用自动滑动：

const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleControls'), {
  interval: false // 禁用自动轮播
});

额外提示：默认的悬停暂停行为 #

Bootstrap轮播自带一个实用的内置行为：当鼠标悬停在轮播区域时，自动滑动会暂时停止；鼠标离开后，自动滑动会自动恢复。这个功能不需要额外配置，直接就能生效哦。

内容的提问来源于stack exchange，提问作者Xodarap