javascript - 如何打开 Bootstrap Carousel 幻灯片以在滚动时更改？

Question

我正在使用 bootstrap carousel在我的网站上。但我希望它的功能略有不同。我希望幻灯片在 mouseScroll 上改变(每次鼠标滚动时每张幻灯片)。

如何使用 Bootstrap Carousel 实现它？

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

jsfiddle

Answer 1

$('#myCarousel').carousel('next') 滑动到下一个元素 documented . 所以你可以绑定(bind)滚动事件来做到这一点:

$('#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

您还可以使用类选择器将它绑定(bind)到所有轮播而不是特定的单个轮播:为此使用 $('.carousel').bind(...)。如果您的要求是让所有轮播支持鼠标滚轮，而不仅仅是特定的单个轮播，类选择器会更方便。