Bootstrap Carousel：删除自动幻灯片答案

【问题标题】：Bootstrap Carousel : Remove auto slideBootstrap Carousel：删除自动幻灯片
【发布时间】：2013-02-05 07:25:07
【问题描述】：

我正在使用引导轮播。我想要的是滑块只会在单击导航或分页时滑动。我试过删除

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

它工作正常，但我的问题是一旦我已经点击了导航或分页，它现在是自动滑动的。是否可以取消自动滑动功能？如果是这样，怎么做？

【问题讨论】：

【解决方案1】：

在 Bootstrap v5 中使用：data-bs-interval="false"

<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">

【讨论】：

【解决方案2】：

您可以通过 js 或 html（简单）两种方式完成此操作

$('.carousel').carousel({
  interval: false,
});

这将使自动滑动停止，因为没有添加毫秒并且永远不会滑动。

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

变成：

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

根据@webMan 的评论更新

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

通过使用上述脚本，您将能够自动移动图像

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

通过使用上述脚本，auto-rotation 将被阻止，因为interval 是false

【讨论】：

【解决方案4】：

更改/添加到轮播 div 上的 data-interval="false"

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

【讨论】：

【解决方案5】：

请尝试以下方法：

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

【讨论】：

【解决方案6】：

data-interval="假"

把这个添加到对应的div中...

【讨论】：

【解决方案7】：

你只需要在你的 DIV 标签中再添加一个属性

data-interval="false"

无需接触 JS！

【讨论】：

【解决方案8】：

来自official docs：

interval 自动循环项目之间的延迟时间。 如果false，轮播将不会自动循环。

您可以使用 javascript 或使用 data-interval="false" 属性传递此值。

【讨论】：