ページング付きのブートストラップカルーセル - カルーセルコントロールを使用している場合、現在のスライドがナビゲーションでアクティブでない

Question

私は、ページの代わりにナビゲーションとしてページ分割を使用するカルーセルを作成しました。

ページ番号を使用して移動すると、正常に動作し、アクティブなクラスが追加されます。コントロール（左と右）を使用して移動すると、次の/前のページに正しく移動しますが、ナビゲーション内のアクティブなクラスは変更されません。問題の

ページには、それは以下のコードを使用して、このjsfiddleからだhere

です：http://jsfiddle.net/juddlyon/Q2TYv/10/

は、私の知る限り、私はjsfiddleから例を追いました。何が悪かったのか？

// invoke the carousel 
$('#myCarousel').carousel({ 
interval: false 
}); 

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() { 

// grab href, remove pound sign, convert to number 
var item = Number($(this).attr('href').substring(1)); 

// slide to number -1 (account for zero indexing) 
$('#myCarousel').carousel(item - 1); 

// remove current active class 
$('.carousel-linked-nav .active').removeClass('active'); 

// add active class to just clicked on item 
$(this).parent().addClass('active'); 

// don't follow the link 
return false; 
}); 

/* AUTOPLAY NAV HIGHLIGHT */ 

// bind 'slid' function 
$('#myCarousel').bind('slid', function() { 

// remove active class 
$('.carousel-linked-nav .active').removeClass('active'); 

// get index of currently active item 
var idx = $('#myCarousel .item.active').index(); 

// select currently active item and add active class 
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 

}); 

Answer 1

使用している例では、ブートストラップの新しいバージョンを使用しています。イベントslidの名前がslid.bs.carouselに変更されました。

新しいイベントへのバインディングはあなたのために機能します。

$('#myCarousel').bind('slid.bs.carousel', function() { 

    // remove active class 
    $('.carousel-linked-nav .active').removeClass('active'); 

    // get index of currently active item 
    var idx = $('#myCarousel .item.active').index(); 

    // select currently active item and add active class 
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 

}); 

ブートストラップドキュメントに対応するリンク：http://getbootstrap.com/javascript/#carousel-events