jquery - ブートストラップ カルーセルが進むか戻るかを検出する

Question

Twitter のブートストラップ カルーセルが前進しているのか後退しているのか、どうすればわかりますか? 私は次のようなことができるようにしたい:

$('#myCarouse').on('slide', function(e) {
  if (fwd?) {do something}
});

Answer 1

Carousel プラグインがスライドイベント オブジェクトに追加する唯一の特別な情報はrelatedTarget、切り替え先の要素を含むプロパティです。これを使用して、カルーセル内で移動しようとしている場所を手動で計算できます。

次のようなもの：

$('#myCarousel').on('slide', function (e) {
  var $active = $(this).find('.item.active')
    , children = $active.parent().children()
    , activePos = children.index($active)
    , nextPos = children.index(e.relatedTarget)
    , diff = nextPos - activePos;

    if (diff === 1 || diff < -1 || diff === 0) {
        console.log('next');
    } else {
        console.log('prev');
    }
});​

これdiff === 0は、最後のスライドで最初のスライドに移動するときに見た奇妙な動作を処理するためです。なぜか、イコール出てくるactivePos。nextPos意味がわかりません。それだけです。

ここにデモがあります：

JSFiddle