使用 bootstrap.js 2.02 版
我正在尝试让 Twitter Bootstrap Carousel 在有人访问我的网站时自动循环。现在，自动循环仅在您至少单击一次循环按钮后才起作用。
我希望轮播在该间隔立即开始循环。
有人知道怎么做吗？
我的网站是 hotairraccoon.com
您会看到在单击轮播后，它开始每 5 秒左右循环一次，但我不希望需要单击才能显示轮播内容。
谢谢！
【问题讨论】：
标签： javascript twitter-bootstrap carousel
一个快速而肮脏的解决方案是以编程方式单击文档就绪按钮：
$(function() {
$(".right.carousel-control").click();
});
顺便说一句：确保在引用 $ 的其他脚本之前加载 jQuery，现在您有两个 Uncaught ReferenceError: $ is not defined，因为您在第 101 行和第 182 行调用 $，但首先在第 243 行加载 jquery。
我建议使用诸如 firebug 或开发人员工具 (chrome/safari) 之类的工具来捕获这些错误。
编辑：我认为您已经有了一个可行的解决方案，但是因为您在加载之前使用了 jquery，所以它不起作用。
【讨论】：
$('.carousel').carousel({
interval: 2000
})
【讨论】：
尝试像这样初始化你的轮播：
$('.carousel').carousel().next();
【讨论】：
注意：如 cmets 中所述，此解决方案将在 Bootstrap 2 中正常工作。有关如何在 Bootstrap 3 上完成相同行为的说明，请参阅 MattZ 的回答。
我遇到了和你一样的问题，我所要做的就是在初始化轮播后调用 carousel('cycle') 方法：
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 3000
});
$('.carousel').carousel('cycle');
});
</script>
我意识到这个问题很老了，但我今晚在谷歌上搜索试图自己弄清楚，发现没有人正确回答。投票最多的答案不会自动启动轮播，它只会在按下一个不是 OP 想要的按钮后循环。
【讨论】：
这是对我有用的解决方案，基于 Jesse Carter 对这个问题的回答。我不知道为什么会这样，但由于某种原因，它需要 2 次调用，一个在文档点内部，另一个在外部。如果我删除其中任何一个，就会出现问题，例如暂停功能无法正常工作，或者自动循环。除此之外，间隔似乎只在 doc.ready 中起作用。最欢迎来自 javascript 头的评论 ;-) 但我怀疑 T.B. 的这个领域。并非完全没有错误！我正在使用 2.0.2，我知道它有点落后（当前版本现在是 2.0.4）但我看不到这个区域有任何变化
jQuery(document).ready(function () {
jQuery('#myCarousel').carousel(
{
interval:2000
});
});
jQuery('#myCarousel').carousel();
【讨论】：
不确定你是否解决了这个问题，但我也遇到了这个问题。我通过将轮播间隔设置包装在这样的函数中来解决它：
!function ($) {
$(function() {
$('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);
【讨论】：
jquery.js 文件必须在 bootstrap.js 之前加载，无论它们是放置在 head 标签中还是文件末尾。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>
【讨论】：
解决此问题的正确方法是在创建轮播时将“活动”类添加到轮播中的第一个图像。这将使轮播尽快开始循环。
这是一个例子：
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
【讨论】：
虽然这里无疑有正确的答案，但我只是想补充一点，您可以通过在代码中添加错误来重现海报描述的确切行为。例如删除分号或结束脚本标签，轮播将不再自动播放。
所以你应该做的第一件事就是在你的 javascript 控制台中寻找错误！
【讨论】：
试试这个。
$(document).ready(function ()
{
$('.carousel').carousel({interval:5000,pause:false});
});
【讨论】：
在 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
【讨论】：
在 Bootstrap 3.0 中，这可以通过向轮播容器添加“data-ride”属性来实现：
...【讨论】：
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img1" class="img-responsive" alt="stuff1" >
</div>
<div class="item">
<img src="img2" class="img-responsive" alt="stuff2" >
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!--This script should be at the very bottom of the page (footer works for me)-->
<script>
$('#myCarousel').carousel
({
interval: 2000,
})
</script>
【讨论】：
如果这些解决方案都不适合您。 试试这个：
$(document).ready(function () {
function playcarousel(){
$('.carousel-control.right').trigger('click');
}
window.setInterval(playcarousel, 4000);
});
【讨论】：
还有另一种方法可以自动循环引导轮播。
使用 data-ride="carousel" 属性。它告诉引导程序在页面加载时立即开始为轮播设置动画。
【讨论】：