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() {
$(".carousel").swipeleft(function() {  

}); /* END document ready */

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.