Twitter Bootstrapカルーセル：スライドの方向を取得する

Question

カルーセルが左右にスライドしているかどうかをどのように判断できますか？スライドとスライドのイベントのドキュメントを見てきましたが、どちらもスライドの方向に関する関連情報を提供していません。

私はまた、イベントハンドラに渡されるイベントオブジェクトを調べましたが、そこでは有用な手がかりを見つけることはできません。

助けていただけたら幸いです！

Answer 1

私が見ることができる限り、ブートストラップは、カルーセルがどのような方向にイベントオブジェクトを介して移動しているかを公開していません。ただし、スライドに含まれる要素に「右」または「左」のクラスを追加する必要はありません。

基本的には2つのオプションがあります。イベントオブジェクトの方向を公開するか、要素の右または左のクラスを探します。

オプション1：

あなたは、ブートストラップ、カルーセルコードを変更する必要があります。

e = $.Event('slide', {direction: direction}) 

（bootstrap.jsの通常版のライン337-340の周り）

に

e = $.Event('slide') 

、その後、あなたが方向性を得ることができます：カルーセルでは、機能変更をスライドさせこのような何か：

var $carousel = $('.carousel'); 
$carousel.carousel(); 

$carousel.bind('slide', function(e) { 
    console.log("e.direction = " + e.direction); 
}); 

OR オプション2：

cssの "left"または "right"クラスが要素に追加されるのを少し待ってから、そのクラスが存在するかどうかを確認します。

イベントがトリガーされてから左側のクラスが設定されるまでに競合状態が存在するため、タイムアウトが必要です。明らかにこれはハッキーの解決策ですが、ブートストラップコードを変更する必要はありません。おそらく他のオプションもありますが、オプション1が最高だと感じています。

編集：ブートストラップCSSの最新版では（2.1.1）オプション1のためのラインの変更は次のようになります。

（ライン340） から：

, e = $.Event('slide', { 
    relatedTarget: $next[0] 
}) 

へ：

, e = $.Event('slide', { 
    relatedTarget: $next[0], 
    direction: direction 
}); 

Answer 2

3.0.0-rc1から、次のように、アクティブな要素、次の要素、インデックス、インデックス、およびスライド方向にアクセスします。 セレクターの特異性は、必要に応じて自由に減らすことができます。Twitterのブートストラップ3の場合

carousel.on('slide.bs.carousel', function (event) { 

    var active = $(event.target).find('.carousel-inner > .item.active'); 
    var from = active.index(); 
    var next = $(event.relatedTarget); 
    var to = next.index(); 
    var direction = event.direction; 

}); 

Answer 3

：

$('#myCarousel').on('slide.bs.carousel', function (event) { 
    alert(event.direction); 
});