A web Development pro A web Development pro - 1 year ago 161
Javascript Question

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 I achieve it with Bootstrap Carousel?

interval: 3000


tmg tmg
Answer Source

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

$('#myCarousel').bind('mousewheel', function() {

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) {
    } else {

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download