Bootstrap Carousel：删除自动滑动

Question

我正在使用 Bootstrap Carousel。我想要的是滑块仅在单击导航或分页时才会滑动。我尝试过删除

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

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

Answer 1

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

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

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

通过 Html 添加

data-interval="false"

并删除

data-ride="carousel"

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

变成：

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

根据@webMan的评论更新

Answer 2

来自官方文档：

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

您可以使用 javascript 或使用

data-interval="false"

属性传递此值。

Answer 3

您只需要在 DIV 标签中再添加一个属性即可

data-interval="false"

无需接触JS！

Answer 4

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

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

Answer 5

在 Bootstrap v5 中使用：

data-bs-interval="false"

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

Answer 6

请尝试以下操作：

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

Answer 7

数据间隔=“假”

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

Answer 8

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

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

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

通过使用上面的脚本，

auto-rotation

将被阻止，因为

interval

是

false

Answer 9

无需执行任何操作即可在 JS 中添加此内容

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

Answer 10

-1
投票

省略 data-bs-ride 可能会起作用。