8

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

スライドイベントのイベントハンドラーに渡されるイベントオブジェクトも調べましたが、そこにも有用な手がかりが見つからないようです。

どんな助けでもいただければ幸いです！

4

3 に答える 3

8

3.0.0-rc1以降、以下はアクティブな要素、次の要素、インデックスからインデックス、およびスライド方向にアクセスするために機能します。必要に応じて、セレクターの特異性を自由に下げてください。

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;

});
于 2013-08-08T22:19:22.633 に答える
6

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

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

オプション1：

ブートストラップカルーセルコードを変更する必要があります。カルーセルでは、スライド機能が変更されます。

e = $.Event('slide')

に

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

（通常のバージョンのbootstrap.jsの337-340行目あたり）

そして、あなたはこのようなもので方向を得ることができます：

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

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

またはオプション2：

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

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

$carousel.bind('slide', function(e) {

  setTimeout( function(){
    var left = $carousel.find('.item.active.left');
    var right = $carousel.find('.item.active.right');
    if(left.length > 0) {
      console.log('left');
    }
    else if(right.length > 0) {
      console.log('right');
    }
  }, 500);
});

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

編集：最新バージョンのブートストラップcss（2.1.1）では、オプション1の行変更は次のようになります。

（340行目）from：

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

に：

, e = $.Event('slide', {
  relatedTarget: $next[0],
  direction: direction
});
于 2012-09-15T01:26:45.453 に答える
5

twitterブートストラップ3の場合：

$('#myCarousel').on('slide.bs.carousel', function (event) {
    alert(event.direction);
});
于 2015-01-21T14:43:32.813 に答える