4

だから、私が設計している UI のナビゲーションにカルーセルを使用しようとしています。カルーセル内の div オブジェクトの 1 つのインデックスを簡単に取得する方法があるかどうか疑問に思っています。

divの1つをクリックすると、それがカルーセル内の中央に配置されるようにしようとしているので、クリックされたdivのインデックスを取得できれば、以下のコードを呼び出してそれを中央のアイテムとして設定できます.

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('to.owl.carousel', NUMBEROFDIVCLICKED);

私がやろうとしていることの画像: アイテムの動きのイメージ

4

2 に答える 2

14

を使用しているため、明らかにバージョン 2.0 ベータ版について話していますto.owl.carousel。多くの場合うまくいかないので、私はLeifの解決策には行きません。だから、これはあなたができることです：

$('.owl-carousel').on('click', '.owl-item', function(e) {
  var carousel = $('.owl-carousel').data('owl.carousel');
  e.preventDefault();
  carousel.to(carousel.relative($(this).index()));
});

ここにデモがあります。ただし、これはベータ版であり、変更される可能性があることに注意してください。また、最新の開発を使用する必要があります。

使用しているプラ​​グイン (ナビゲーション) に応じて、次のtoように呼び出しを記述する必要があります。

carousel.to(carousel.relative($(this).index()), false, true);

ここにいくつかの説明があります：

  • $(this).index()jQuery の一部であり.owl-item、コンテナ内でクリックされた項目の位置を示します。
  • $('.owl-carousel').data('owl.carousel')$('.owl-carousel').owlCarousel('method', 'arg')は Owl Carousel のプラグイン オブジェクトを提供するため、プラグイン メソッド ( ) や jQuery イベント ( )を使用せずに API を直接使用できます$('.owl-carousel').trigger('method', ['arg'])。
  • carousel.relative($(this).index())クリックされたアイテムの相対的な位置を示します。loopこれは、複製されたアイテムを使用するため、プラグインを開始する前により多くのアイテムを持っているアクティブ化した場合に常に必要です。
  • carousel.to()相対位置のみを受け入れます。
于 2014-08-07T17:36:21.203 に答える