如何将Bootstrap旋转木马幻灯片更改为滚动？ [英] How to turn Bootstrap Carousel slides to change on scroll?

问题描述

我在我的网站上使用自举轮播。但我希望它的功能与众不同。我希望幻灯片在mouseScroll上进行更改（每次滑动鼠标时都会显示每张幻灯片）。

如何使用Bootstrap Carousel实现它？

  $（'＃myCarousel'）。carousel（{
 interval：3000 
}）; 
  

解决方案

$（'＃$） （'next'）幻灯片到下一个项目为记录一>。
所以你可以绑定滚动事件来做到这一点：

  $（'＃myCarousel'）。bind（'mousewheel '，function（）{
 $（this）.carousel（'next'）; 
}）; 
  

编辑：您可以获得鼠标滚轮事件并使轮播移动到下一张或上一张幻灯片：

<$ p $（p）$（$＃$） $（this）.carousel（'next'）;
} else {
$（this）.carousel（'prev'）;
}
}）;

更新了您的 jsfiddle

您也可以通过使用类选择器将其绑定到所有传送带而不是特定单个传送带：使用 $（'。carousel'）。bind（...）。如果您的要求是让所有轮播支持鼠标滚轮，而不仅仅是一个特定的鼠标滚轮，那么类选择器会更方便。

I am using bootstrap carousel in my website. But I want its functionality little different. I want slides to change on mouseScroll (each slide on each time mouse scrolled).

How can I achieve it with Bootstrap Carousel?

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

jsfiddle

解决方案

$('#myCarousel').carousel('next') slides to next item as documented. So you can bind scroll event to do that:

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

You can also bind it to all carousels instead of a specific single one by using a class selector: Use $('.carousel').bind(...) for that. 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.

这篇关于如何将Bootstrap旋转木马幻灯片更改为滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！