jquery - Bootstrap Carousel 在开始时不滑动

Question

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

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

最后，我没有发现错误。

页面加载后，我的 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">‹&lt;/a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
</div>

我的源代码：

<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
• 引导程序 2.3.1

非常感谢任何帮助。

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

Answer 1

我相信问题在于您如何在第一个元素上定义活动类。

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

Bootstrap 轮播的工作原理是活动项目在轮播内的所有“项目”元素中旋转。

当您使用 ng-class="headlines.indexOf(headline) == 0" 时，ANgularJS 很可能会将第一个项目的类评估为“活动项目”，将第二个项目评估为“项目”。

这正如你所料。

但它也很可能会阻止类的变化，因为第一项现在被迫始终处于活动状态，而不是按应有的方式旋转。

这不是你所期望的。

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

Answer 2

解决方案是我必须更改我的库的顺序，包括：

我改变了这一点：

<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

我很晚才遇到同样的问题，发现引导程序提供了一个选项，可以在页面加载时启动轮播滑动，即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>