javascript - 猫头鹰旋转木马 2 鼠标滚轮 slider

标签 javascript jquery owl-carousel-2

是否有选项可以仅滚动鼠标滚轮上的猫头鹰旋转木马 slider 之一? 当我单击上一个或下一个按钮时,它仅滑动当前的轮播,但在鼠标滚轮上滑动所有!

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

最佳答案

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

关于javascript - 猫头鹰旋转木马 2 鼠标滚轮 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38098865/

相关文章:

javascript - 如何修复 colReorder 错误 - getAttribute 不是函数?

javascript - 克隆上一个 tr 行并将其附加到当前表

reactjs - 如何在 React Owl Carousel 中使用 owl carousel 选项?

asp.net - OnClientClick ="return confirm(' 你确定要删除吗');"

open-source - 可通过 Javascript 访问的计算机代数系统

javascript - 在javascript中单击图像后更改图像(不使用下拉菜单)

javascript - jQuery 右侧文本框值未在提交数据上获取

javascript - 如何强制执行之前注入(inject)的脚本?

javascript - 如何使用 jquery 删除不在 div 内的 HTML 代码

owl-carousel - 具有自定义类的启动项目 owlcarousel2 slider