20

我的网站上有一个使用 Twitter Bootstrap 创建的轮播。我不确定为什么它不会自动启动，尽管当页面加载时，它不会启动，直到您单击箭头前进到下一张幻灯片，然后计时器启动。从引导文档中它说它可以被初始化有了这个对象，但我把它放在哪里？

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

我的网站有两个 javascript 文件，jquery-1.7.2.min.js 和 bootstrap.min.js。

4

8 回答 8

34

假设您已准备好其他所有内容，请尝试在结束正文标记之前添加以下内容： 

<script type='text/javascript'>
    $(document).ready(function() {
         $('.carousel').carousel({
             interval: 2000
         })
    });    
</script>
于 2013-06-14T17:37:56.173 回答
9

在此处输入图像描述

我遇到了同样的问题并找到了解决方案；由于我们都将 javascripts 放在页面末尾，因此必须将函数的调用放在它们之后：

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#myCarousel').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

于 2013-09-02T09:00:33.980 回答
8

以为我会添加一些关于以角度工作的引导程序 3 的内容。

根据您的应用程序在 Angular 中的广泛程度，轮播加载时可能会稍有延迟。例如，我将轮播加载为模板，它会在文档加载后稍微加载，因此，我必须为代码添加一个轻微的超时来启动轮播。

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $('#Carousel').carousel({
                interval: 3000,
                cycle: true,
            }).trigger('slide');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>
于 2014-03-04T10:19:21.997 回答
3

我遇到了同样的问题，所以我发现我错过了data-ride="carousel"引导轮播中的那个。检查你的代码。 链接到引导文档

于 2015-09-12T05:13:10.000 回答
2

不需要任何javascript代码，您可以使用数据属性将其设置为自动更改data-interval="1000"

自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。

<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">

http://getbootstrap.com/javascript/#carousel

于 2014-10-06T19:08:12.553 回答
1

我已经为此坐了几个月，每次我预编译资产时，都会有一些错误进入资产公共/文件夹，所以有些东西不起作用。我需要将旧资产复制到 public/assets 文件夹中以使其正常工作。很长一段时间以来，我试图弄清楚导入的顺序以及哪些要求语句正在破坏已经工作的东西。

经过这么长时间我的解决方案是，我需要导入这些：

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

并且永远不要将脚本，例如 start-carousel-script 放入 application.js 文件中。如果我像这样将它放入 application.html.erb 文件中：

<%= javascript_include_tag "application" %>

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

一切正常。注意：它必须在应用程序 include_tag 下，否则我无法工作。

注意 2：我也有一个 googlemaps 脚本，但它只是（！）导入到地图所在的文件中。就是这个脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>

我真的希望这可以帮助其他人节省时间。有些事情不是那么明显。

于 2014-01-18T08:17:20.667 回答
0

这发生在我身上。但是 - 有一个选项是暂停：“悬停”，这是默认设置。

当然，这个选项使我的全屏滑块停止，即使在第一张幻灯片上也是如此；）所以请将您的 pause 设置为 false 或“悬停”以外的其他内容。

于 2014-08-27T07:44:19.137 回答
0

只是为那些正在使用 react 的人添加，执行以下操作将触发循环：

componentDidMount(){
    this.setState({activeIndex:0})
}
于 2018-02-18T21:52:07.430 回答