8

この例では、スライド1〜3を表すアイコンを備えたBootstrapカルーセルを実装できました：http： //jsfiddle.net/alexmoss/QzVq8/

クラス「アクティブ」がデフォルトでスライド1に追加され、アクティブなスライドが変更されると変更されることに気付きました。私がやりたいのは、これが弾丸にも起こるようにすることです。最初のものをアクティブにしましたが、スライド自体がスライド2にある場合など、2番目のものをアクティブにします。

4

2 に答える 2

19

基本的に、現在表示されているスライドのインデックスを作成し、そのインデックスを使用して、それぞれのナビゲーションボタンに「アクティブ」クラスを適用しました。

$('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#carousel-nav a').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#carousel-nav a:nth-child(' + index + ')').addClass('active');
});

コードを明確に最適化して、使用する変数を減らすことができます。ただし、何が起こっているのかを理解できるように、意図的に拡張しました。

于 2012-05-09T15:51:59.760 に答える
1

カルーセルの「slid」イベントをバインドする必要があります。詳細はこちら-> 「slide」および「slid」イベントをBootstrapツールキットのカルーセルにアタッチする方法は？

于 2012-05-08T13:58:34.180 に答える