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轮播的工作原理是活动项目旋转通过旋转木马内的所有“item”元素。

当你使用ng-class =“headlines.indexOf（headline）== 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>

Bootstrap Carousel在开始时没有滑动

3 个答案: