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.

Tags:

14 Responses to “Add Swipe touch event to Bootstrap carousel”

  1. Hans Broeksteeg January 11, 2016 at 3:48 pm #

    Thanks Ricard. This works great! Cheers!
    Hans Broeksteeg

    • Tim Rand June 21, 2017 at 5:56 pm #

      Exactly what I needed, so simple, thank you!

      • Rick June 21, 2017 at 8:44 pm #

        You’re welcome!

  2. Kumar April 13, 2016 at 1:47 pm #

    probably the best solution out there. still no comments.

  3. Marcelo April 16, 2016 at 4:09 pm #

    Wooooow pretty simple and works!

  4. nur April 19, 2016 at 1:17 pm #

    OMG! . working great thanks mate 🙂

  5. Soumyadeep June 23, 2016 at 6:07 pm #

    thanks a lot mate …. this is awesome

  6. Stefani August 29, 2016 at 9:15 am #

    Thank you so much! It works perfectly

    • Rick August 29, 2016 at 5:12 pm #

      You’re welcome!

  7. MT July 10, 2017 at 4:02 pm #

    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 July 10, 2017 at 4:19 pm #

      Hard to say just from this information. It has been 2 years, maybe jQuery mobile has changed its functions.

    • Edward October 11, 2017 at 1:40 pm #

      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.

Leave a Reply

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