How to turn Bootstrap Carousel slides to change on scroll?

Question

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

Answer 1

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