Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/473.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/asp.net-mvc/16.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在鼠标滚轮上设置单个项目滚动,在owl转盘中单击按钮可设置多个项目滚动_Javascript_Jquery_Carousel_Owl Carousel_Mousewheel - Fatal编程技术网

Javascript 在鼠标滚轮上设置单个项目滚动,在owl转盘中单击按钮可设置多个项目滚动

Javascript 在鼠标滚轮上设置单个项目滚动,在owl转盘中单击按钮可设置多个项目滚动,javascript,jquery,carousel,owl-carousel,mousewheel,Javascript,Jquery,Carousel,Owl Carousel,Mousewheel,目前,它在下一个上一个按钮点击和鼠标滚动上滚动3个项目 我的设置如下: $(document).ready(function() { var owl = $('.owl-carousel'); owl.owlCarousel({ loop: true, nav: true, margin: 10, slideBy: 'page', dot

目前,它在下一个上一个按钮点击和鼠标滚动上滚动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();
          });
        });
$(文档).ready(函数(){
var owl=$('.owl carousel');
猫头鹰旋转木马({
循环:对,
导航:是的,
差额:10,
幻灯片:“第页”,
点:错,
响应:{
0: {
项目:1
},
600: {
项目:3
},
960: {
项目:5
},
1200: {
项目:3
}
}
});
owl.on('mouseweell','.owl stage',函数(e){
如果(e.deltaY<0){
触发器('next.owl.carousel');
}否则{
owl.trigger('prev.owl.carousel');
}
e、 预防默认值();
});
});
基本上,由于我的设置
slideBy:'page'
,它会滚动3个项目。但是,我想在鼠标滚动上滚动单个项目

只要一点提示就可以了

@Dharmesh

  • 您可以使用
    owl.trigger('to.owl.carousel',[0500])
    替换
    owl.trigger('next.owl.carousel')
    owl.trigger('prev.owl.carousel')
  • 自定义owl.carousel.js。找到
    Navigation.prototype.getPosition
    Navigation.prototype.next
    Navigation.prototype.prev
    方法并自定义 参数 这是我的自定义演示页面: @Dharmesh

  • 您可以使用
    owl.trigger('to.owl.carousel',[0500])
    替换
    owl.trigger('next.owl.carousel')
    owl.trigger('prev.owl.carousel')
  • 自定义owl.carousel.js。找到
    Navigation.prototype.getPosition
    Navigation.prototype.next
    Navigation.prototype.prev
    方法并自定义 参数 这是我的自定义演示页面:

    我感谢你的努力。但是,说真的,我什么都不懂。那么,你能简单描述一下吗?当你点击鼠标滚轮时,它会触发相同的api#1,当您可以获取第一个活动项索引时,可以使用“to.owl.carousel”。“owl.trigger('to.owl.carousel',[index,500])”(我无法得到这个,你可以试试)2,你可以像我一样定制owl.carousel.js。我感谢你的努力。但是,说真的,我什么都不懂。那么,你能简单描述一下吗?当你点击鼠标滚轮时,它会触发相同的api#1,当您可以获取第一个活动项索引时,可以使用“to.owl.carousel”。“owl.trigger('to.owl.carousel',[index,500])”(我没法得到这个,你可以试试看)#2,你可以像我一样定制owl.carousel.js。