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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $(".carousel").swiperight(function() { $(this).carousel('prev'); }); $(".carousel").swipeleft(function() { $(this).carousel('next'); }); }); /* END document ready */ |
Hans Broeksteeg
Thanks Ricard. This works great! Cheers!
Hans Broeksteeg
Tim Rand
Exactly what I needed, so simple, thank you!
Rick
You’re welcome!
Kumar
probably the best solution out there. still no comments.
Marcelo
Wooooow pretty simple and works!
nur
OMG! . working great thanks mate 🙂
Soumyadeep
thanks a lot mate …. this is awesome
Stefani
Thank you so much! It works perfectly
Rick
You’re welcome!
MT
it did not work for me. 2 errors in the console
1) cannot read property concat of undefined. (from the built up downloaded)
2)swiperight is not a function.
any help?
Rick
Hard to say just from this information. It has been 2 years, maybe jQuery mobile has changed its functions.
Edward
IT NO LONGER WORKS!
Recent Jquery Mobile versions broken when working with recent Bootstrap… How annoying that the issue has been ignored!!!
Yes, it did not work for me. 2 errors in the console
1) cannot read property concat of undefined. (from the built up downloaded)
2)swiperight is not a function.
Tajinder Singh
same problem
Rick
Have a look at the documentation, see if that helps
https://api.jquerymobile.com/swiperight/
Best regards