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

Posted 2023-02-16

【中文标题】页面加载后，如何使 Bootstrap js 轮播自动循环？

【英文标题】：How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?

【发布时间】：2012-04-02 19:06:09

【问题描述】：

使用 bootstrap.js 2.02 版

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

我希望轮播在该间隔立即开始循环。

有人知道怎么做吗？

我的网站是 hotairraccoon.com

您会看到在单击轮播后，它开始每 5 秒左右循环一次，但我不希望需要单击才能显示轮播内容。

谢谢！

【问题讨论】：

w3schools.com/bootstrap/bootstrap_carousel.asp 添加属性 data-ride="carousel" 如果您使用引导程序 3

【参考方案1】：

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

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

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

我建议使用诸如 firebug 或开发人员工具 (chrome/safari) 之类的工具来捕获这些错误。

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

【讨论】：

非常感谢。将我的 js 加载到标题的正下方效果很好，我实际上能够将原始初始化保持为 $('.carousel').carousel();引导文档似乎建议应该在页面末尾加载所有 javascript，但我想这是一个坏主意。我是 js 新手，所以我相信一切。所以我的问题是，我应该在顶部加载所有js还是只加载jquery然后在底部加载bootstrap.js？

@JonathanLarkin 在页面底部加载所有内容是一种很好的做法 (developer.yahoo.com/performance/rules.html)，但请确保以正确的顺序加载脚本。您不能在加载之前引用 jQuery，仅此而已。如果您有很多脚本，请考虑使用像 require.js 这样的脚本加载来确保您正确加载所有内容（它可以让您定义模块之间的依赖关系）。

【参考方案2】：

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

【讨论】：

如果默认值适合您，您甚至不必指定间隔参数。那一定是引导程序错误或其他什么（我将在我自己的情况下添加，我使用的是引导程序的轮播，但我的项目本身并不基于引导程序，这可能是原因）。

【参考方案3】：

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

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

【参考方案4】：

注意：如 cmets 中所述，此解决方案将在 Bootstrap 2 中正常工作。有关如何在 Bootstrap 3 上完成相同行为的说明，请参阅 MattZ 的回答。

我遇到了和你一样的问题，我所要做的就是在初始化轮播后调用 carousel('cycle') 方法：

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

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

我意识到这个问题很老了，但我今晚在谷歌上搜索试图自己弄清楚，发现没有人正确回答。投票最多的答案不会自动启动轮播，它只会在按下一个不是 OP 想要的按钮后循环。

【讨论】：

即使这样，我也需要按下一步按钮才能让旋转木马开始循环

很高兴它帮助了你！

@Pedr 更新了我的答案，以参考 MattZ 为从事 BS3 工作的人提供的参考

【参考方案5】：

这是对我有用的解决方案，基于 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();

【参考方案6】：

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

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

【参考方案7】：

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>

【参考方案8】：

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

这是一个例子：

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

【讨论】：

感谢您询问 github 问题，但这对我不起作用:-(

我假设您将活动添加到其中一项 (class="item")。那应该可以。

不适合我。我的第一个 .item 元素也有“活动”类，并且轮播不会自行启动（与 OP 相同的问题）。

【参考方案9】：

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

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

【参考方案10】：

试试这个。

$(document).ready(function ()

    $('.carousel').carousel(interval:5000,pause:false);
);

【参考方案11】：

在 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

【讨论】：

如果我不添加 data-ride 属性，它仍然会在页面加载时自动循环，我该如何禁用它？

@Ruben，迟到了一天，还差了一美元，但如果你仍然让它自动启动，那么你一定有一些 JavaScript 放在某个仍在启动它的地方。

@MattZuba 你是对的，我有一个全屏滑块插件，这个插件触发了我的滑块

【参考方案12】：

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

...

【参考方案13】：

    <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"  > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive"  > 
              </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>

【参考方案14】：

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

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

【讨论】：

您应该说明为什么这样做。此外，良好的代码格式使其更易于阅读。

感谢@lvicedo 它在 angular5 场景中帮助了我

【参考方案15】：

还有另一种方法可以自动循环引导轮播。

使用 data-ride="carousel" 属性。它告诉引导程序在页面加载时立即开始为轮播设置动画。