Add Mouse Wheel Support to Bootstrap Carousel with jQuery

I was adding mouse wheel events to a ul element with the CSS rule overflow:hidden to emulate mouse wheel scrolling when no scrollbar was present.

The links in the unordered list also trigger a Bootstrap 4.1 Modal that contains a Bootstrap Carousel. So I decided to add the same functionality to my modal carousel gallery.

$('#my-carousel').on('wheel mousewheel DOMMouseScroll', function(event) {
	var delta = event.wheelDelta || -event.detail || event.originalEvent.wheelDelta || -event.originalEvent.detail;
	if (delta) {
		$(this).carousel((delta > 0 ? 'prev' : 'next'));
	}
});

Note: You can reverse the scroll direction by changing the comparison to delta < 0 or swap the order of ‘next’ and ‘prev’.

This method can be applied to any Bootstrap Carousel. Mine just happened to be in a Boostrap Modal dialog. This example can also be a good starting point for adding mouse wheel events to any element where wheel navigation is desired but not automatically supported 😉

2 thoughts on “Add Mouse Wheel Support to Bootstrap Carousel with jQuery”

  1. I have sections above and below the carousel, though the mousewheel function works, but the screen also moves up and down, is there any way to control it as well ?

    1. Could be browser specific or maybe you have a gaming mouse? The latter sends a massive number of wheel/move events vs. conventional mice.

      Don’t think you can kill the event to prevent over-scrolling since each movement is an individual event ‍♂️

Leave a Reply

Your email address will not be published. Required fields are marked *