如何在页面加载后使Bootstrap js轮播自动循环？ [英] How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?

问题描述

使用bootstrap.js版本2.02

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

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

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

我的网站是hotairraccoon.com

你会看到你点击轮播一次之后，它会开始每隔5秒左右循环一次，但我不希望点击需要显示轮播内容。

谢谢！

解决方案

注意：正如评论中所提到的，这个解决方案可以正确地用于Bootstrap 2.请参阅MattZ的答案，了解如何在Bootstrap 3上完成相同的行为。

我遇到了和你一样的问题，而且我必须做的就是在我初始化轮播后调用carousel（'cycle'）方法：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'。carousel'）。carousel（{
 interval：3000 
}）; 
 
 $（'。carousel'）。carousel（'cycle'）; 
}）; 
< / script> 
  

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

Using bootstrap.js version 2.02

I'm trying to get the Twitter Bootstrap Carousel to automatically cycle as soon as someone visits my site. Right now, the auto cycling works only after you click one of the cycle buttons at least once.

I want the carousel to begin cycling at the interval right away.

Does anyone know how to do this?

My site is hotairraccoon.com

You'll see how after you click the carousel once, it begins to cycle every 5 seconds or so, but I don't want the click to be required to reveal carousel content.

Thanks!

解决方案

Note: As mentioned in the comments this solution will work correctly for Bootstrap 2. Refer to MattZ's answer for instructions on how to accomplish the same behavior on Bootstrap 3.

I had the same issue as you and all I had to do to fix it was call the carousel('cycle') method after I had initialized the carousel:

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

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

I realize this question is old but I was googling tonight trying to figure it out myself and saw noone had properly answered it. Top voted answer will not automatically start the carousel, it will only cycle once a button has been pressed which is not what the OP was looking for.

这篇关于如何在页面加载后使Bootstrap js轮播自动循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！