2017-01-11 14 views
0

私はowl-carousel2を使ってサウンドの再生リストを設定しています(loop:trueとcenter:true)、すべて正常に動作していますが、私の問題についてdocを見つけることはできません:Owlカルーセル2アクティブprev/next item on

私は、クリックすると各項目にprev/nextナビゲーションを追加しようとしています。私はユーザーが自分の選択したアイテムをクリックできるようにしたいので、センターをこのアイテムにスライドさせます。 マウスのスライドでは動作しますが、アイテムのクリックでは動作しません。

これを行う方法はありますか?

私のカルーセルinitがあります:

owl.owlCarousel({ 
      loop:true, 
      center: true, 
      margin:3, 
      dot: false, 
      nav: false, 
      items:5, 
      responsive:{ 
       0:{ 
        items:2 
       }, 
       768:{ 
        items:4 
       }, 
       1200:{ 
        items:5 
       }, 
       1500:{ 
        items:4 
       } 
      } 
     }); 

私はこれを試してみました:それは作品

owl.on('click', '.item', function (property) { 
      console.log(property); 
      owl.trigger('next.owl.carousel'); 
     }); 

が、唯一の次の項目のために、私はそれが前のクリック

だかどうかを知る方法を見つけるいけません

ありがとうございました

+0

あなたはフィドルを提供することができますか? –

答えて

0

以前と同じトリガーです。私は推測

$(".prev").on('click', function() { 
    owl.trigger('prev.owl.carousel'); 
}); 
0

:コード例を参照してくださいあなたの目標は、フクロウのアイテムと自動スクロールが左または右のいずれかの項目をクリックすることです。

はい、必ずあなたの項目長> 1.

を作成し、以下のコードをしようとした場合:

owl.on('click', '.item', function (property) { 
     var $currentItem = $(property.target).closest('.owl-item'); 
     var $activeItems = owl.find('.active'); 
     if ($currentItem.index() - $($activeItems[0]).index() <= $activeItems.length/2 - 1) 
     { 
      owl.trigger('prev.owl'); 
     } 
     else if ($($activeItems[$activeItems.length - 1]).index() - $currentItem.index() <= $activeItems.length/2 - 1) 
     { 
      owl.trigger('next.owl'); 
     } 
    }); 
関連する問題