jQuery Unslide - Touch doesn't work

Question

I already solved this, and I'm only posting to help others save some time.

I am using unslider for a business website, a website I'm making responsive, so the feature of adding touch support to the slider is appealing. Unfortunately it doesn't work straight out of the box, as the author claims.

Answer 1

UPDATE
The unslider plugin I used, was outdated. I downloaded it from unslider.com where I first found it( it's still an outdated version there), hence I had the difficulties.

If you need to get the latest version, go to: https://github.com/idiot/unslider/

And if you want to see my issue report: https://github.com/idiot/unslider/issues/69

---

The problem is that the author hasn't updated his project in 4 months, and since then the swipe event has been moved from $.event.swipe to $.event.special.swipe.

The problem occurs in line 108 of the unslider plugin, where it test for the existence of the swipe plugin.

108: if($.event.swipe) {
109:    this.el.on('swipeleft', _.prev).on('swiperight', _.next);

Just change it to:

108: if($.event.special.swipe) {
109:    this.el.on('swipeleft', _.prev).on('swiperight', _.next);

It's an easy fix, but will take some googling to figure out.

If you want to be sure it will work with earlier versions, you can do this:

108: if($.event.special.swipe || $.event.special.swipe) {
109:    this.el.on('swipeleft', _.prev).on('swiperight', _.next);

But I don't recommend that.

Also, the author doesn't mention this, but the swipe plugin page does, you need to include jquery.event.move in addition to jquery.event.swipe in your scripts.

I hope this helped someone :)

---

To answer the comment below:

Remember to include all files, in the right order, and remember all of them:

<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.move.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.swipe.js"></script>
<script type="text/javascript" src="/scripts/unslider.min.js"></script>