为什么我的Bootstrap Carousel仅滑动一次后就失去响应？

导致轮播仅滑动一次就无响应的问题主要有5处，按优先级修复即可：

1. JS加载顺序错误
   你把包含轮播初始化代码的script.js放在了Bootstrap JS文件前面，执行初始化代码时Bootstrap的Carousel方法还未加载，初始化失效。调整加载顺序为：

<!-- 先加载jQuery -->
<script type="text/javascript" src="libs\jQuery\jquery-3.6.0.min.js"></script>
<!-- 再加载Bootstrap JS -->
<script  type="text/javascript" src="bootstrap-5.1.3-dist\js\bootstrap.bundle.min.js"></script>
<!-- 最后加载自定义JS -->
<script type="text/javascript" src="libs/js/script.js"></script>  

2. 混用Bootstrap 4的旧属性
   你用的是Bootstrap 5版本，所有数据属性前缀已经从data-换成data-bs-，旧属性无法被识别。需要把HTML里的data-ride、data-target、data-slide-to、data-slide全部替换为带bs前缀的版本。
3. 事件绑定冲突
   控制按钮上同时加了原生数据属性绑定和onclick手动调用滑动方法，会导致单次点击触发两次滑动，逻辑混乱卡死。直接删掉两个控制按钮上的onclick属性即可。
4. 指示器数量和轮播项数量不匹配
   你定义了3个轮播指示器，但是实际有4个carousel-item，轮播计数到第4项时没有对应指示器状态更新，直接卡死。补充第4个指示器：

<ol class="carousel-indicators">
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li>
</ol>

5. 初始化参数格式错误
   初始化时ride参数传了字符串"true"，实际Bootstrap 5的该参数有效值为布尔值true/false或者字符串"carousel"，调整初始化代码：

$(document).ready(function() {
    $('.carousel').carousel({
        ride: true,
        interval: 1000
    });  
});

以上步骤全部修改后即可正常轮播。

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