Bootstrap 轮播：删除自动幻灯片

0md85ypi 于 2023-01-22 发布在 Bootstrap

关注(0)|答案(9)|浏览(168)

我正在使用Bootstrap Carousel。我只希望滑块只在单击导航或分页时滑动。我已尝试删除

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

它工作正常，但我的问题是，一旦我已经点击了导航或分页，它现在是自动滑动。是否可以删除自动滑动功能？如果可以，如何？

9条答案

你可以通过两种方式来实现，js或者html（easist）
1.* * 通过js**

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

这将使自动滑动停止，因为没有毫秒添加，将永远不会滑块下一步。
1.* * 通过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">

来自官方文件：

interval自动循环项目之间的延迟时间。* 如果为false，则转盘不会自动循环。*

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

您只需要向DIV标记中再添加一个属性，即

data-interval="false"

不用碰JS！

更改/添加到转盘div上的数据间隔=“假”

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

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

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

请尝试以下操作：

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

数据间隔=“假”
将此添加到相应的div ...

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

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

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

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

省略data-bs-ride可能有效。