在鼠标滚轮上设置单个项目滚动，在猫头鹰旋转木马上按钮单击滚动多个项目

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方法并自定义 PARAMS;

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