javascript - Bootstrap Carousel：删除自动幻灯片

Question

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

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

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

score 273 · Accepted Answer

您可以通过 js 或 html (easy) 两种方式执行此操作

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

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

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

变成：

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

根据@webMan 的评论更新

score 114 · Accepted Answer

来自官方文档：

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

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

score 60 · Accepted Answer

60

您只需要向您的 DIV 标签添加一个属性，即

data-interval="false"

不用碰JS！

于 2016-10-05T12:55:37.850 回答

score 38 · Accepted Answer

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

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

score 8 · Accepted Answer

请尝试以下方法：

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

score 8 · Accepted Answer

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

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

score 4 · Accepted Answer

4

数据间隔=“假”

将此添加到相应的 div ...

于 2016-12-12T07:28:45.817 回答

score 3 · Accepted Answer

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

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

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

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

8 回答 8