3

次の矢印の開始時にクリックする限り、非常にうまく機能するブートストラップ カルーセルを実装しました。その後、自動的にスライドを開始します。何もクリックしないと、起動しません。何が問題になる可能性がありますか? 私はたくさんの投稿を読み、さまざまなことを試しました：

  • 調整された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>

私のソース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" />

バージョン:

  • jQuery1.9.1
  • AngularJS 1.0.6
  • ブートストラップ 2.3.1

どんな助けでも本当に感謝しています。

編集:問題は、jquery lib が angular js の後に含まれていたことです。切り替えたところ、うまくいきました...

4

3 に答える 3

2

問題は、最初の要素でアクティブなクラスを定義する方法にあると思います。

ng-classを使用すると、リスト内の各項目のクラスが評価されます。

Bootstrap カルーセルは、カルーセル内のすべての「アイテム」要素を介して回転するアクティブなアイテムに基づいて機能します。

ng-class="headlines.indexOf(headline) == 0" を使用すると、ANGularJS は最初のアイテムのクラスを「アクティブなアイテム」と評価し、2 番目のアイテムを「アイテム」と評価する可能性が高くなります。

これはあなたの期待通りです。

しかし、最初のアイテムが本来あるべきように回転するのではなく、常にアクティブになるように強制されるため、クラスの変更も妨げられる可能性が最も高くなります。

これはあなたが期待するものではありません。

代わりに、ng-class を使用して最初のアイテムをアクティブに設定するのではなく、アクティブなクラスを 1 回追加する必要があると思います。もう 1 つのオプションは、angular-ui ブートストラップ ディレクティブ ( http://angular-ui.github.io/bootstrap ) を使用することです。これは、より優れた「AngularJS」の方法で実行します。

于 2013-05-08T06:03:20.710 に答える
0

私は遅くに同じ問題に直面し、ブートストラップが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>
于 2015-07-23T13:33:45.457 に答える
0

解決策は、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>

そしてそれはうまくいきました。

于 2013-05-10T07:33:13.913 に答える