Bootstrap Carousel:删除自动幻灯片

时间:2013-02-20 10:20:07

标签: javascript jquery twitter-bootstrap

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

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

它工作正常但我的问题是,一旦我已经点击导航或分页,它现在是自动滑动。是否可以删除自动滑动功能?如果是这样,怎么样?

8 个答案:

答案 0 :(得分:192)

请尝试添加:

interval: false

这将使自动滑动停止,因为没有添加Milliseconds并且永远不会滑动下一步。

答案 1 :(得分:99)

来自official docs

  

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

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

答案 2 :(得分:42)

您只需要在DIV标记中再添加一个属性

data-interval="false"

无需触摸JS!

答案 3 :(得分:25)

更改/添加到data-interval =" false"在旋转木马上

QueryException in Connection.php line 647:
SQLSTATE[42000]: Syntax error or access violation: 1055 'cart.products.name' isn't in GROUP BY

答案 4 :(得分:5)

请尝试以下方法:

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

答案 5 :(得分:4)

数据间隔=&#34;假&#34;

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

答案 6 :(得分:3)

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

By using the above script, you will be able to move the images automaticaly

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

By using the above script, auto-rotation will be blocked because interval is false

答案 7 :(得分:0)

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

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