0

マウスホイールのフクロウ カルーセル スライダーの 1 つだけをスクロールするオプションはありますか? 前または次のボタンをクリックすると、現在のカルーセルのみがスライドしますが、マウスホイールではすべてがスライドします!

HTML

<div class="owl-carousel">
   <div class="item">
      item
   </div>
   <div class="item">
      item
   </div>
   <div class="item">
      item
   </div> 
</div>

JS

$('.owl-carousel').owlCarousel({
   loop: true,
   margin: 30,
   nav: true, 
   responsiveClass: true,
   responsive: {
      0: {
         items: 1 
      },
      600: {
         items: 2 
      },
      1000: {
         items: 3
      }
   }
});
var owl = $('.owl-carousel');
owl.on('mousewheel', '.owl-stage', function(e) {
   if (e.deltaY > 0) {
      owl.trigger('next.owl');
   } else {
      owl.trigger('prev.owl');
   }
   e.preventDefault();
});

jsfiddle

4

1 に答える 1

1

さて、あなたのコードowl = $('.owl-carousel')では、すべてのノードを class で取得していますowl-carousel。したがって、mousewheelイベントが発生すると、すべてのスライドがスクロールされます。そのため、現在フォーカスされているスライダーへの参照を提供し、そのスライダーのイベントのみをトリガーする必要があります。これで問題が解決することを願っています。jsfiddle

于 2016-06-29T12:48:38.663 に答える