Bootstrap Carousel：移除自动滑动

119

我正在使用Bootstrap Carousel。我只想让滑块仅在单击导航或分页时才滑动。我尝试删除

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

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

javascript jquery twitter-bootstrap

— 卡齐
source

225

您可以通过js或html两种方法（轻松）

通过js

$('.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的评论更新

— 伊利亚·雷兹（Iliya Reyzis）
source

38

还摆脱data-ride="carousel"内联的...和正确的语法：data-interval="false"

— webMan

111

从官方文档：

interval（间隔）在自动循环项目之间延迟的时间。如果为false，则轮播不会自动循环。

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

— 迭戈·阿古洛（DiegoAgulló）
source

9

感谢data-interval ='false'，如果您the-bootstrap在Wordpress 中使用主题，这是一个简单的选择

— toto_tico 2013年

32

data-interval="false"是更好的解决方案，无需触摸JS引导程序！

— lxg 2015年

2

这对我不起作用<div class =“ carousel slide” data-ride =“ carousel” id =“ carousel-ex” data-interval =“ false”> <div class =“ carousel-inner”>...。没什么...仍然在自动滑动

— Lachezar Raychev 2015年

对于简单的情况，这确实要简单得多，但是请记住，使用自定义项scripts.js并且在html中不保留任何脚本代码，这是一个更好的设计！;）

— cregox

55

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

data-interval="false"

无需接触JS！

— 尼康·迪玛（Nikonj Dhimar）
source

36

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

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

— 阿伦
source

7

请尝试以下操作：

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

— Nikit Barochiya
source

1

这是在运行时使用控制台与我合作的唯一工具。

— 比绍伊·汉娜

4

data-interval =“ false”

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

3

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

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

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

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

— 尼丁·安维卡（Nitin Anvekar）
source