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>