title: How can I make my owl carousel direction follow the mouse wheel direction
body: <p>When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction.
  How can i make my owl carousel direction follow the mouse wheel direction ?
  When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction.
  How can i make my owl carousel direction follow the mouse wheel direction ?</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 owl = $('.owl-carousel');
  owl.owlCarousel({
      loop: true,
      margin: 10,
      padding: 10,
      responsiveClass: true,
      rtl: false,
      stagePadding: 100,
      smartSpeed: 550,
      autoplay: true,
      autoplayTimeout: 1000,
      autoplayHoverPause: true,
      nav: true,
      responsiveClass: true,
      responsive: {
          0: {
              items: 1,
              nav: true
          },
          600: {
              items: 3,
              nav: true
          },
          1000: {
              items: 5,
              nav: true,
              
          }
      }
  })
  owl.on('mousewheel', '.owl-stage', function (e) {
      if (e.deltaY &gt; 0) {
          owl.trigger('next.owl');
      } else {
          owl.trigger('prev.owl');
      }
      e.preventDefault();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html{
              width: 100vw;
              background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
          }
      .demo-container{
          margin-top: 5em;
          background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
      }
      .owl-carousel .owl-stage-outer{
          overflow: visible;
      }
      .sb-carousel-wrap {
      position: relative;
      margin-left: -15px;
      margin-right: -15px;
      z-index: 1;
  }
  .sb-carousel-wrap .brand-carousel-gradient {
      position: absolute;
      top: 0;
      width: 105px;
      height: 100%;
      z-index: 10;
  }
  .brand-carousel-gradient.left {
      left: 0;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
  }
  .brand-carousel-gradient.right {
      right: 0;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
  }
  .sb-car-img{
   overflow: hidden;
  }
  .sb-car-img:hover img{
       transform: scale(1.2);
  }
  
  .sb-itm-img  {
     transition: all 0.6s ease-in 0s;
   -webkit-transition:  all 0.6s ease-in 0s;
   -ms-transition:  all 0.6s ease-in 0s;
  }
  .my-slider{
   float: left:
   width:100%;
   padding: 0 15px;
   overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="my-slider"&gt;
  &lt;div class="sb-carousel-wrap"&gt;
          &lt;div class="brand-carousel-gradient left"&gt;&lt;/div&gt;
          &lt;div class="brand-carousel-gradient right"&gt;&lt;/div&gt;
         &lt;div class="demo-container"&gt;
           &lt;div class="owl-carousel owl-theme"&gt;
      
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
      
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
      
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
      
      
              &lt;/div&gt;
              &lt;div class="item"&gt;
                  &lt;div class="sb-car-img"&gt;
                      &lt;img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" class="sb-itm-img" alt=""&gt;
                  &lt;/div&gt;
      
      
              &lt;/div&gt;
      
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>