How To Turn Bootstrap Carousel Slides To Change On Scroll?

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

Solution 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.