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 😉

Leave a Reply

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