[英]How to turn Bootstrap Carousel slides to change on scroll?
I am using bootstrap carousel in my website. 我在我的网站上使用bootstrap carousel 。 But I want its functionality little different.
但我希望它的功能与众不同。 I want slides to change on mouseScroll (each slide on each time mouse scrolled).
我希望在mouseScroll上更改幻灯片(每次鼠标滚动时每张幻灯片)。
How can I achieve it with Bootstrap Carousel? 如何使用Bootstrap Carousel实现它?
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel').carousel('next')
slides to next item as documented . $('#myCarousel').carousel('next')
滑动到下一个项目,如文档所示 。 So you can bind scroll event to do that: 所以你可以绑定scroll事件来做到这一点:
$('#myCarousel').bind('mousewheel', function() {
$(this).carousel('next');
});
Edit: you can get mouse wheel events and make carousel move to next or previous slide: 编辑: 您可以获取鼠标滚轮事件并使轮播移动到下一张或上一张幻灯片:
$('#myCarousel').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
$(this).carousel('next');
} else {
$(this).carousel('prev');
}
});
updated your jsfiddle 更新了你的jsfiddle
You can also bind it to all carousels instead of a specific single one by using a class selector: Use $('.carousel').bind(...)
for that. 您还可以使用类选择器将其绑定到所有轮播而不是特定的轮播:使用
$('.carousel').bind(...)
。 If your requirement is to have all your carousels support the mouse wheel, not just a specific single one, the class selector is more convenient. 如果您的要求是让所有轮播都支持鼠标滚轮,而不仅仅是特定的单个滚轮,则类选择器更方便。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.