4

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

A web Development pro
  • 53
  • 1
  • 1
  • 4

1 Answers1

9

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

Community
  • 1
  • 1
tmg
  • 19,895
  • 5
  • 72
  • 76
  • 1
    `mousewheel` works in Chrome 58, however, according to https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel , the event is deprecated and should be replaced with [wheel](https://developer.mozilla.org/en-US/docs/Web/Events/wheel) event, which supports more browsers. updated [JSFiddle](https://jsfiddle.net/mA6Za/457/). Also I noticed the wheel direction is different between `wheel` and `mousewheel` events. – biggates Apr 30 '17 at 08:05