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

Question

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

如何使用 Bootstrap Carousel 实现它？

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

jsfiddle

Answer 1

$('#myCarousel').carousel('next') 滑动到下一项为documented。 所以你可以绑定滚动事件来做到这一点：

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