Bootstrap Carousel在开始时没有滑动

Question

我实现了一个bootstrap轮播，只要我在下一个箭头的开始点击，它就会很好用。 然后它会自动开始滑动。 如果我不点击任何东西，它就不会启动。 可能是什么问题？ 我看了很多帖子，试过不同的东西：

• 调整后的jquery版本：尝试从1.7.1到1.9.1，没有变化
• 查看我包含的.js文件，检查他们是否得到了正确的订单
• 将html代码与bootstrap示例进行了比较

最后，我没有发现错误。

我的html代码在加载页面后最终看起来像这样：

<div class="span9 ng-scope">
<h2>Test Heading</h2>
<div id="myCarousel" class="carousel slide">

    <!-- Carousel Items -->
    <div class="carousel-inner">
        <!-- ngRepeat: headline in headlines --><div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope active" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/1112.jpg" alt="" src="img/partials/home/headings/1112.jpg">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/1" title="Mehr"> <h4 class="ng-binding">Test</h4> </a>
                <p class="ng-binding">
                    Test2
                </p>
            </div>
        </div><div ng-class="{active: headlines.indexOf(headline) == 0}" class="item ng-scope" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/1113.jpg" alt="" src="img/partials/home/headings/1113.jpg">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/2" title="Mehr"> <h4 class="ng-binding">Test</h4> </a>
                <p class="ng-binding">
                    Test2
                </p>
            </div>
        </div>
    </div>
    <!-- Carousel Navigation -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

我的源码html代码：

<h2>Test Heading</h2>
<div id="myCarousel" class="carousel slide">

    <!-- Carousel Items -->
    <div class="carousel-inner">
        <div ng-class="{active: headlines.indexOf(headline) == 0}" class="item" ng-repeat="headline in headlines">
            <img ng-src="img/partials/home/headings/{{headline.image}}.jpg" alt="">
            <div class="carousel-caption">
                <a href="#willkommen/neuigkeiten/{{headline.id}}" title="Mehr"> <h4>{{headline.header}}</h4> </a>
                <p>
                    {{headline.body|truncate:100}}
                </p>
            </div>
        </div>
    </div>
    <!-- Carousel Navigation -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

包含index.html中的脚本：

<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>
<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/twitter-bootstrap/js/bootstrap.min.js"></script>
<script src="js/namespace.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/filters.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap-responsive.min.css" />

版本：

• jQuery 1.9.1
• AngularJS 1.0.6
• Bootstrap 2.3.1

任何帮助都非常感谢。

编辑：问题是，jquery lib包含在角js之后。 当我切换它时，它起作用了......

Answer 1

我认为问题在于如何在第一个元素上定义活动类。

使用ng-class时 ，它将评估列表中每个项目的类。

Bootstrap轮播基于活动项目通过旋转木马内的所有“项目”元素旋转而工作。

当你使用ng-class =“headlines.indexOf（标题）== 0”时，ANgularJS很可能将第一项的类评估为“活动项”，第二项的类评估为“项目”。

这是你所期望的。

但它很可能也会阻止班级改变，因为现在第一个项目必须始终处于活动状态 ，而不是按原样旋转。

这不是你所期望的。

相反，我认为你想要一次性添加active，而不是使用ng-class将第一个项目设置为活动。 另一种选择是使用angular-ui bootstrap指令（ http://angular-ui.github.io/bootstrap ），它以更好，更“AngularJS”的方式进行。

Answer 2

解决方案是我必须改变我的lib的顺序包括：

我改变了：

<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>
<script src="lib/jquery/jquery-1.9.1.min.js"></script>

至：

<script src="lib/jquery/jquery-1.9.1.min.js"></script>
<script src="lib/angular/angular-1.0.6.min.js"></script>
<script src="lib/angular/angular-1.0.6-resource.min.js"></script>

它起作用了。

Answer 3

我最近遇到了同样的问题，发现bootstrap提供了一个选项，可以在页面加载时启动轮播滑动，即data-ride =“carousel” 。 这应该添加到顶级容器中。 以下是代码段。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        // ... 
    </ol>
    <div class="carousel-inner" ng-controller="CarouselDemoCtrl">
        // ...
    </div>
</div>