如何修改Bootstrap 4 carousel轮播切换间隔？代码不生效排查

问题场景 #

• 需求：通过jQuery修改Bootstrap 4 carousel轮播组件的自动切换间隔
• 异常表现：代码执行后轮播切换速度不符合预期
• 问题截图：
• 原实现代码：

$('.carousel').carousel({
    interval: 100
});

问题原因 #

代码不生效主要有两个核心问题：

1. 执行时机/初始化冲突：如果轮播是通过data-ride="carousel"属性触发Bootstrap自动初始化的，Bootstrap会在DOM加载时优先读取元素上的data配置完成初始化。如果jQuery代码执行在Bootstrap自动初始化之前，传入的配置会直接被覆盖；如果代码执行在初始化之后，直接调用.carousel({})不会覆盖已有配置。
2. 参数值设置错误：interval配置项的单位是毫秒，设置的100对应0.1秒就切换一次，切换速度极快，和常规预期的数秒切换差距极大，很容易被误认为是代码不生效。Bootstrap默认的轮播间隔是5000（即5秒）。

修复方案 #

• 方案1：JS正确初始化写法，确保在DOM加载完成后执行，先销毁已初始化的轮播实例再传入自定义配置：

$(function() {
  $('.carousel').carousel('dispose').carousel({
    interval: 2000 // 按需修改数值，比如2000代表2秒切换一次
  });
});

• 方案2：直接通过DOM属性配置，不需要额外写JS，优先级高于JS初始化配置，直接在轮播根元素上加data-interval属性即可：

<div class="carousel slide" data-ride="carousel" data-interval="2000">
  <!-- 轮播指示器、轮播项、前后切换按钮按业务需求补充 -->
</div>

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