Adding touch-swipe support to jquery based sliders

Question

Using this great thumb slider http://manos.malihu.gr/jquery-thumbnail-scroller

However it doesn't offer swipe support for touch based devices. Is there an easy way to add touch-swipe support to jquery plugins like this?

Answer 1

You can try jQuery Mobile Touch Events.

Answer 2

It is possible without switching to jQuery Mobile. I did so in this small project for school.

The way it's done is by using this library called jQuery UI Touch Punch which will simulate mouse events from touch devices. All you need to do is include the library under your jQuery includes like such: <script src="jquery.ui.touch-punch.min.js"></script>.

Answer 3

You can add touch-swipe using jQuery UI Touch Punch.

Using Touch Punch is as easy as 1, 2… Just follow these simple steps:

1. Include jQuery and jQuery UI on your page.

   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
   

2. Include Touch Punch after jQuery UI and before its first use.

Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

   <script src="jquery.ui.touch-punch.min.js"></script>

For demo, visit http://touchpunch.furf.com/