Adding touch support to Unslider
May 8, 2016

Unslider is a simple, straightforward jQuery image & content slider, but the version published on their website hasn’t been updated in a while. Here’s how to add touch / swipe support.

Including the latest version

First off, the version that’s hosted on Unslider’s website hasn’t been updated in a little while, so proper touch support won’t work with that one, even if you invoke it correctly and include the proper files. So, let’s head over to the Unslider Github repo and grab the latest from there.

Add a few dependencies

Next, we’ll need to include the swipe and move libraries from stephband’s github page. These will allow you to invoke Unslider with the initSwipe method, enabling touch support for mobile devices, like so:

$('.slider').unslider('initSwipe',{
// options
});

…and that’s it. Update your repo or server and test on your device and you should be able to advance or reverse the slides by swiping. You can also test this in a desktop browser by clicking and dragging left or right on a slide, or by using the mobile emulation mode offered in the dev tools of most modern browsers.