Owl Carousel 2 鼠标滚轮滑块答案

【问题标题】：Owl Carousel 2 mousewheel sliderOwl Carousel 2 鼠标滚轮滑块
【发布时间】：2016-06-29 20:48:38
【问题描述】：

是否有一个选项可以在鼠标滚轮上只滚动一个 owl-carousel 滑块？当我单击上一个或下一个 btn 时，它只会滑动当前的轮播，但在鼠标滚轮上会全部滑动！

HTML

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

$('.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

【问题讨论】：

标签： javascript jquery owl-carousel-2

【解决方案1】：

好吧，在您的代码中，owl = $('.owl-carousel') 正在抓取类为 owl-carousel 的所有节点。因此，当mousewheel 事件发生时，会导致所有幻灯片的滚动。因此，您需要引用当前聚焦的滑块并仅触发该滑块的事件。希望这可以解决您的问题。 jsfiddle

【讨论】：

Owl 无法在 Fiddle 中工作，因为您没有附加 jquery Mousewheel 文件。