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

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>

Answer 5

在Bootstrap 3.0中，可以通过向轮播容器添加“data-ride”属性来实现：

...

Answer 6

尝试像这样初始化您的轮播：

$('.carousel').carousel().next();

Answer 7

如果这些解决方案都不适合您。试试这个：

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});

Answer 8

快速而肮脏的解决方案是以编程方式单击文档准备就绪按钮：

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

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

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

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

Answer 9

不确定你是否解决了这个问题，但我也遇到了这个问题。我通过在这样的函数中包装轮播间隔设置来解决它：

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);

Answer 10

还有一种方法可以自动循环自举转盘。

使用 data-ride="carousel" 属性。它告诉引导程序在页面加载时立即开始动画旋转木马。

Answer 11

根据Jesse Carter对这个问题的回答，这是对我有用的解决方案。我不知道为什么会这样，但由于某种原因，它需要2个调用，一个在文档内准备好，另一个在外面。如果我删除其中任何一个，那么出现问题，例如暂停功能无法正常工作，或自动循环。除此之外，间隔似乎只在doc.ready内部起作用。来自javascript头的评论最受欢迎;-)但我怀疑这个领域的T.B.并非完全无bug！我正在使用2.0.2，我知道它有点落后（当前版本现在是2.0.4）但是我没有看到这个区域有任何变化

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();

Answer 12

解决此问题的正确方法是在创建轮播时将“活动”类添加到轮播中的第一个图像。这将使旋转木马尽快开始骑车。

以下是一个例子：

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

Answer 13

虽然这里的答案无疑是正确的，但我只想补充说，您可以通过在代码中添加错误来重现海报所描述的确切行为。例如，删除分号或结尾脚本标签，轮播将不再自动播放。

所以你要做的第一件事就是在你的javascript控制台中查找错误！

Answer 14

试试这个。

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

Answer 15

    <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>

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

15 个答案: