Owl carousel with mouse wheel scroll plugin speed

Question

I'm using Owl Carousel 2 along the Mouse Wheel plugin as the website shows how to implement it: https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Here is my example: https://z-testing.000webhostapp.com/_owlcarousel/

This is my code:

owl.on('mousewheel', '.owl-stage', function (e) {
  if (e.deltaY>0) {
      owl.trigger('next.owl');
  } else {
      owl.trigger('prev.owl');
  }
  e.preventDefault();
});

The problem I have is that the scroll it's not smooth, it is very fast and scrolls through 6-10 slides at once which it's not useable. I want it to be as smooth as the mouse wheel scroll as posible.

I have find a lightbox plugin that integrates the mousewheel plugin and checked how they do it but I just don't know how to use that with my code, can you help me with it?

This is the plugin: http://fancybox.net

You can check on the Image gallery (ps, try using mouse scroll wheel) popup gallery example.

If you download the plugin it, you can see that they implemented Mouse Wheel plugin this way:

if ($.fn.mousewheel) {
    wrap.bind('mousewheel.fb', function(e, delta) {
        if (busy) {
            e.preventDefault();

        } else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
            e.preventDefault();
            $.fancybox[ delta > 0 ? 'prev' : 'next']();
        }
    });
}

Can you help me to make it work correctly with Owl Carousel?

Answer 1

You need to use smartSpeed function to set the scrolling speed.

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
  loop:true,
  margin:0,
  nav:true,
  smartSpeed:1000,
  responsive:{
      0:{
          items:1
      },
      600:{
          items:1
      },
      1000:{
          items:1
      }
  }
});
owl.on('mousewheel', '.owl-stage', function (e) {
  if (e.deltaY>0) {
      owl.trigger('next.owl');
  } else {
      owl.trigger('prev.owl');
  }
  e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
  $("#footer").fadeOut();
}).mouseenter(function(){
  $("#footer").fadeIn();
});
$(function(){
  $("#header").load("includes/header.html");
  $("#footer").load("includes/footer.html");
});

body { padding-top: 0px;}

<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">

  <header id="header"></header>

  <div class="owl-carousel owl-theme">
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
  </div>

  <footer id="footer"></footer>

  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>