Add Swipe touch event to Bootstrap carousel

So here's the deal: you want the built-in Bootstrap carousel to be swipeable (if that's a word) on touch devices.

It actually easier than I thought. Here's the recipe:

jQuery Mobile

Head to the jQuery Mobile Custom Download and create a custom build with just Touch.

jquery mobile custom download touch

Add the swipe left/right event

With the code below every carousel element will be swipeable. You could, if you wanted to, change the selector to something more specific.

$(document).ready(function() { $(".carousel").swiperight(function() { $(this).carousel('prev'); }); $(".carousel").swipeleft(function() { $(this).carousel('next'); }); }); /* END document ready */
Code language: JavaScript (javascript)

Leave a Reply

Add <code> Some Code </code> if you need to.