如何在打开模态框时暂停Bootstrap轮播的自动切换

我懂你现在的困扰——点开模态框后，Bootstrap轮播还在自动切换，之前试的pause方法、调整interval选项还有data-interval="false"都没解决问题。别慌，咱们可以通过监听模态框的显示/隐藏事件，精准控制轮播的暂停与重启，具体操作如下：

步骤1：确认轮播实例的目标元素 #

你的轮播已经有了明确的ID carouselExampleControls，刚好可以用它来获取轮播实例，不用额外修改HTML。

步骤2：添加JavaScript事件监听 #

在页面中插入以下JS代码，绑定模态框的触发事件来控制轮播：

// 获取轮播实例
const carousel = $('#carouselExampleControls').carousel();

// 模态框显示时，暂停轮播自动切换
$('#feedback-expanded-id').on('show.bs.modal', function () {
  carousel.carousel('pause');
});

// 模态框关闭后，恢复轮播的自动切换
$('#feedback-expanded-id').on('hide.bs.modal', function () {
  carousel.carousel('cycle');
});

为什么之前的方法没生效？ #

• data-interval="false"是让轮播从一开始就禁用自动切换，不符合你“仅打开模态框时暂停”的需求；
• 单独调用pause方法如果没绑定到模态框的触发时机上，就会错过暂停的最佳时机——必须在模态框开始显示的瞬间触发暂停操作才有效。

把这段代码加上后，再点击模态框链接试试：打开模态框时轮播会立刻停止切换，关闭模态框后又会恢复自动轮播啦。

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