javascript – 如何在滚动时更改Bootstrap Carousel幻灯片？

我在我的网站上使用bootstrap carousel.但我希望它的功能与众不同.我希望在mouseScroll上更改幻灯片(每次鼠标滚动时每张幻灯片).

如何使用Bootstrap Carousel实现它？

$('#myCarousel').carousel({
  interval: 3000
});

jsfiddle

解决方法:

$(‘#myCarousel’).carousel(‘next’)滑动到下一个项目为documented.
所以你可以绑定scroll事件来做到这一点：

$('#myCarousel').bind('mousewheel', function() {
    $(this).carousel('next');
});

编辑：you can get mouse wheel events并使轮播移动到下一张或上一张幻灯片：

$('#myCarousel').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta /120 > 0) {
        $(this).carousel('next');
    } else {
        $(this).carousel('prev');
    }
});

更新了你的jsfiddle

您还可以使用类选择器将其绑定到所有轮播而不是特定的轮播：使用$(‘.carousel’).bind(…).如果您的要求是让所有轮播都支持鼠标滚轮,而不仅仅是特定的单个滚轮,则类选择器更方便.