Twitter Bootstrap Carousel不会自动启动

Question

我的网站上有一个用Twitter Bootstrap创建的旋转木马.我不确定为什么它不会自动启动,但是当页面加载时,它不会启动,直到你单击箭头前进到下一张幻灯片,然后定时器才会启动.从引导程序文档中它说它可以初始化有这个对象,但我把它放在哪里？

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

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

Answer 1

假设您已准备好其他所有内容,请尝试在结束正文标记之前添加此内容:

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

Answer 2

我有同样的问题并找到了解决方案; 因为我们都将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/

Answer 3

以为我会添加一些关于bootstrap 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>