Bootstrap 5轮播仅在首次点击上下页按钮后才启动自动滑动问题求解

问题原因 #

Bootstrap 会在页面初始DOM加载完成后，自动扫描并初始化所有带data-bs-ride="carousel"属性的轮播组件。你的代码逻辑中，轮播的外层DOM先被插入页面，但核心的轮播项是在AJAX异步请求返回后才动态插入的：初始Bootstrap扫描轮播组件时，carousel-inner容器为空，没有可用的激活轮播项，因此轮播的自动循环逻辑不会被触发。只有当你手动点击切换按钮后，Bootstrap检测到存在有效轮播项，才会启动自动播放。

修复方案 #

在AJAX请求的success回调中，所有轮播项插入完成后，手动调用Bootstrap轮播API启动循环即可，你可以在for循环结束后添加以下代码：

// 获取轮播DOM节点
const carouselNode = document.getElementById(self.carouselId);
// 初始化轮播实例，开启自动播放
new bootstrap.Carousel(carouselNode, {
  ride: 'carousel',
  interval: 5000 // 可自定义切换间隔，单位毫秒
}).cycle();

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