鼠标滚动时滑块更改

Question

我在我的网站上使用引导轮播滑块。我想在 mouseScroll 上更改幻灯片。我该怎么做。这段代码可以正常工作，但我想在 mouseScroll 上更改幻灯片 这是我的代码

     <script>
     $(document).ready(function() {
       $("#product_slider").owlCarousel({  
         rtl:true,
         loop:true,                                                           
         margin:4,
         autoplay:false,
         autoplayTimeout:10000,
         autoplayHoverPause:true,
         lazyLoad : true,
         pagination:false,
         nav:true,
          dots: false,
         navText:false ,
         responsive:{
         0:{
             items:1
         },
         500:{
             items:1
         },
         768:{
             items:4
         },
         1200:{
             items:5

         }
        }
      });

     });
</script>

Answer 1

当您在轮播上滚动鼠标滚轮时，这将使轮播发生变化。我认为在鼠标悬停在轮播上时防止整个页面滚动是明智的，但我没有花时间在这里这样做。
小提琴https://jsfiddle.net/mikeferrari/z34m1wbo/

// select the carousel container
var myelement = document.getElementById("myCarousel"); 

// this function is called every time the mouse wheel is scrolled
function makeItSo() {
  // this is where you tell it to go to the next slide
  $('.carousel').carousel('next')
}

myelement.addEventListener('wheel', function(e) {      
    makeItSo();
});


// start your carousel on page load
$('.carousel').carousel({
  interval: 2000
})