title: How to slide owl carousel slider and slick slider using the mouse wheel and MAC track pad with custom navigation?
body: <p>I am using OwlCarousel 2 for a slider (<a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">https://owlcarousel2.github.io/OwlCarousel2/</a>). I have three sliders as of now. My issue is, I have created the custom navigation(It's displaying below of image) and I have to slide the image using the mouse wheel. So it's working on the windows but not working on MAC book.</p>
  
  <p>I tried from here <a href="https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html" rel="nofollow noreferrer">https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html</a></p>
  
  <p>Would you help me out with this?</p>
  
  <p>I tried below code also but still not trigger. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var action = false,
    clicked = false;
  var Owl = {
    init: function() {
      Owl.carousel();
    },
    carousel: function() {
      var owl;
      $(document).ready(function() {
  
        owl = $('.owl-carousel').owlCarousel({
          items: 1,
          center: true,
          nav: false,
          dots: true,
          loop: true,
          margin: 10,
          animateOut: 'slideOutUp',
          animateIn: 'slideInUp',
          dotsContainer: '.test',
          // navText: ['prev','next'],
        });
  
  
        $('.homeDots').on('click', 'li', function(e) {
          owl.trigger('to.owl.carousel', [$(this).index(), 300]);
        });
  
        $('.homeDots').on('mousewheel', 'li', function(e) {
          //$('.homeDots').trigger('to.owl.carousel', [$(this).index(), 300]);
          if (e.deltaY &gt; 0) {
            $('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
          } else {
            $('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
          }
          e.preventDefault();
        });
  
      });
    }
  };
  
  
  var owl = $('.owl-carousel');
  owl.on('changed.owl.carousel', function(event) {
    var item = event.item.index - 2; // Position of the current item
    $('h2').removeClass('animated bounce');
    $('.owl-item').not('.cloned').eq(item).find('h2').addClass('animated bounce');
  });
  
  $(document).ready(function() {
    Owl.init();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  h2 {
    margin: 0;
    padding: 0;
  }
  
  .sliderText {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    color: #fff;
  }
  
  .banner-bg {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  
  .slider1 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
  }
  
  .slider2 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
  }
  
  .slider3 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"&gt;
  &lt;div class="owl-carousel owl-theme"&gt;
    &lt;div class="item"&gt;
      &lt;div class="banner-bg slider1"&gt;
        &lt;div class="sliderText"&gt;
          &lt;h2&gt;Lorem ipsum dolor sit amet&lt;/h2&gt;
          &lt;h3&gt;Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.&lt;/h3&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="banner-bg slider2"&gt;
        &lt;div class="sliderText"&gt;
          &lt;h2&gt;Lorem ipsum dolor sit amet&lt;/h2&gt;
          &lt;h3&gt;Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="item"&gt;
  
      &lt;div class="banner-bg slider3"&gt;
        &lt;div class="sliderText"&gt;
          &lt;h2&gt;Lorem ipsum dolor sit amet&lt;/h2&gt;
          &lt;h3&gt;Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="homeDots"&gt;
    &lt;ul class="test text-right"&gt;
      &lt;li class="homeDots1 active" data="0"&gt;About Us&lt;/li&gt;
      &lt;li class="homeDots2" data="1"&gt;Our Products&lt;/li&gt;
      &lt;li class="homeDots3" data="2"&gt;Our Services&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a slick slider(<a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">https://kenwheeler.github.io/slick/</a>). I tried below code in MAC book but it's not working properly. I am on the first slider and I scroll then second image displaying on the screen. Now I am scrolling again then it's stuck. I am scrolling continuously more than 10 times then the third slide coming and stuck.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('ready', function() {
    var slider = $(".slider");
    var scrollCount = null;
    var scroll = null;
  
    slider
      .slick({
        dots: true,
        vertical: true,
        dots: false,
        prevArrow: false,
        nextArrow: false,
        //autoplay: true,
        //autoplaySpeed: 5000,
      });
  
  
    $('.homeDots').on('click', 'li', function(e) {
      //owl.trigger('to.owl.carousel', [$(this).index(), 300]);
      slider.slick('slickNext');
  
    });
  
    slider.on('wheel', (function(e) {
      e.preventDefault();
      clearTimeout(scroll);
      scroll = setTimeout(function() {
        scrollCount = 0;
      }, 200);
      if (scrollCount) return 0;
      scrollCount = 1;
  
      if (e.originalEvent.deltaY &lt; 0) {
        $(this).slick('slickNext');
      } else {
        $(this).slick('slickPrev');
      }
    }));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  .slick-slider {
    height: 100%;
  }
  
  .slick-vertical .slick-slide {
    border: none;
  }
  
  .slider {
    width: 100%;
  }
  
  
  /*.slick-slide {
    margin: 0px 20px;
  }*/
  
  .slick-slide img {
    width: 100%;
  }
  
  .slick-prev:before,
  .slick-next:before {
    color: black;
  }
  
  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }
  
  .slick-active {
    opacity: .5;
  }
  
  .slick-current {
    opacity: 1;
  }
  
  .a-slide {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
  }
  
  .slider div {
    height: 100% !important;
    /* added this */
    width: 100% !important;
  }
  
  .slider1 {
    background-image: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
  }
  
  .slider2 {
    background-image: url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
  }
  
  .slider3 {
    background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
  }
  
  .slider4 {
    background-image: url('https://timesofindia.indiatimes.com/thumb/msid-66476517,imgsize-196276,width-800,height-600,resizemode-4/66476517.jpg');
  }
  
  .slider5 {
    background-image: url('https://media.cntraveller.in/wp-content/uploads/2018/10/GettyImages-990972132-866x487.jpg');
  }
  
  .homeDots {
    position: absolute;
    top: 50%;
    right: 05%;
    z-index: 10;
    transform: translateY(-50%);
    color: #ccc;
    padding-bottom: 20px;
  }
  
  .homeDots ul li {
    padding-bottom: 15px;
  }
  
  .homeDots ul {
    list-style: none;
  }
  
  .homeDots ul li.active {
    font-weight: 700;
  }
  
  .homeDots ul li span {
    position: relative;
  }
  
  .homeDots ul li span:after {
    content: "";
    width: 20px;
    height: 2px;
    background-color: #fff;
    display: block;
    position: absolute;
    right: -30px;
    top: 10px;
  }
  
  .homeDots ul li.active span:after {
    background-color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"&gt;
  
  &lt;div class="slider"&gt;
    &lt;div class="a-slide slider1"&gt;&lt;/div&gt;
    &lt;div class="a-slide slider2"&gt;&lt;/div&gt;
    &lt;div class="a-slide slider3"&gt;&lt;/div&gt;
    &lt;div class="a-slide slider4"&gt;&lt;/div&gt;
    &lt;div class="a-slide slider5"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="homeDots"&gt;
    &lt;ul class="test text-right"&gt;
      &lt;li class="homeDots1 active" data="0"&gt;About Us&lt;/li&gt;
      &lt;li class="homeDots2" data="1"&gt;Our Products&lt;/li&gt;
      &lt;li class="homeDots3" data="2"&gt;Our Services&lt;/li&gt;
      &lt;li class="homeDots4" data="3"&gt;&lt;span&gt;Careers&lt;/span&gt;&lt;/li&gt;
      &lt;li class="homeDots5" data="4"&gt;&lt;span&gt;Cotnact Us&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>