javascript - 在鼠标滚轮上设置单项滚动，在 Owl Carousel 中设置按钮单击上的多项滚动

Question

目前，它在下一个上一个按钮单击和鼠标滚动时滚动 3 个项目。

我的设置如下:

$(document).ready(function() {
          var owl = $('.owl-carousel');
          owl.owlCarousel({
            loop: true,
            nav: true,
            margin: 10,
            slideBy: 'page',
            dots: false,
            responsive: {
              0: {
                items: 1
              },
              600: {
                items: 3
              },
              960: {
                items: 5
              },
              1200: {
                items: 3
              }
            }
          });
          owl.on('mousewheel', '.owl-stage', function(e) {
            if (e.deltaY < 0) {
                owl.trigger('next.owl.carousel');
            } else {
                owl.trigger('prev.owl.carousel');
            }
            e.preventDefault();
          });
        });

基本上，由于我的设置 slideBy: 'page'，它会滚动 3 个项目。但是，我想要在 mousescroll 上滚动单个项目。

只要有提示就可以了。

Answer 1

@Dharmesh

1. 您可以使用owl.trigger('to.owl.carousel', [0, 500]);替换owl.trigger('next.owl.carousel'); owl.trigger('prev.owl.carousel');
2. 自定义 owl.carousel.js。查找Navigation.prototype.getPosition Navigation.prototype.next Navigation.prototype.prev方法并自定义 参数；

这是我的自定义演示页面: https://gyx8899.github.io/YX-JS-ToolKit/pages/owlCarousel2/owl-mousewheel.html