如何在页面加载后使Bootstrap js轮播自动循环？

Question

使用bootstrap.js版本2.02

我试图让Twitter Bootstrap Carousel在有人访问我的网站时自动循环.现在,只有在您单击其中一个循环按钮至少一次后,自动循环才会起作用.

我希望旋转木马能够立即开始骑行.

有谁知道如何做到这一点？

我的网站是hotairraccoon.com

你会看到在你点击旋转木马一次后,它开始每隔5秒左右循环一次,但我不希望需要点击来显示轮播内容.

谢谢!

Answer 1

注意:如评论中所述,此解决方案将适用于Bootstrap 2.请参阅MattZ的答案,了解如何在Bootstrap 3上完成相同的行为.

我遇到了和你一样的问题,在我初始化轮播后,我必须做的就是调用轮播('循环')方法.

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>  

我意识到这个问题已经过时了,但我今晚正在谷歌搜索试图弄清楚自己,并看到没有人正确回答它.最高投票的答案不会自动启动轮播,它只会在按下一个按钮时循环,这不是OP正在寻找的.

Answer 2

在Bootstrap 3.0中,可以通过向轮播容器添加"data-ride"属性来实现:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

Answer 3

$('.carousel').carousel({
  interval: 2000
})

Answer 4

一个快速但肮脏的解决方案是以编程方式单击文档就绪按钮：

$(function() {
  $(".right.carousel-control").click();
});

顺便说一句：请确保在引用 $ 的其他脚本之前加载 jQuery，现在您有两个脚本，Uncaught ReferenceError: $ is not defined因为您在第 101 行和第 182 行调用 $，但 jquery 首先在第 243 行加载。

我建议使用 firebug 或开发人员工具（chrome/safari）等工具来捕获这些错误。

编辑：我认为您已经有了一个可行的解决方案，但是因为您在加载之前使用了 jquery，所以它不起作用。