如何转动Bootstrap Carousel幻灯片以更改滚动？

Question

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

如何使用Bootstrap Carousel实现它？

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

jsfiddle

Answer 1

$('#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(...)。如果您的要求是 all 您的轮播支持鼠标滚轮，而不仅仅是特定的单个滚轮，则类选择器更方便。