Question

我在我的网站上使用bootstrap carousel滑块。我希望在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
})

滑块更改鼠标滚动

1 个答案: