滑动鼠标滚动更改

问题描述:

我在我的网站上使用引导轮播滑块。我想幻灯片来改变mouseScroll.how我可以做this.this代码工作正常,但我想改变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> 

当你滚动鼠标滚轮这将使转盘变化超过它。我认为在鼠标移过旋转木马时防止整个页面滚动是明智的做法,但我没有花时间在这里做。
小提琴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 
}) 
+0

,但它显示了一个错误“遗漏的类型错误:$(...)旋转木马是不是一个函数” – user94

+1

你改变它来满足你的代码?您需要用示例代码中的myCarousel替换.owlCarousel –