jQuery Unslide - Touch doesn't work

问题:

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.

回答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>

回答2:

This didn't work for me, but after extensive tweaks I got it to work smoothly. I blogged step by step what I did, but not why. http://frazer.livejournal.com/21898.html

I hope that helps, especially people new to drupal.

In short - I added this to my page and I got responsive movement:

var wrap = jQuery(".slides_wrap"),
   slides = wrap.find(".img_slide"),
   width = slides.width();
slides
.on("move", function(e) {
          // Move slides with the finger
// banner has moved -100% when one slide to the right
   var left = 100 * e.deltaX / width;
   wrap[0].style.left = parseInt(wrap[0].style.left.replace("%", ""))+left+"%";
})
.on("moveend", function(e) {
setTimeout(function(){
   var left = parseFloat(wrap[0].style.left.replace("%", ""));
   var left_rounded = Math.round(left/100)*100;
   if(left%100!=0){
     jQuery(".slides_wrap").animate({"left":left_rounded + "%"});
  }
},800);
});

回答3:

As of today (November 2014) it seems the swipe functionality was replaced by move. The plugin's url is http://stephband.info/jquery.event.move/ . Just import this one instead of swipe.

I hope someone find this useful. Had to check the commits to found out.

回答4:

I am bumping on this subject as I am a real noob and had trouble to install the Jquery.event.swipe.js module It's now solved, but here a few things noobs like me would make sure to check :

• make sure you have both github.com/stephband/jquery.event.move.js and github.com/stephband/jquery.event.swipe.js in your projet folder
• make a reference to those 2 files in your html file
• make sure you have the unslider.js file in your projet folder as well (I had the unslider.min.js file instead which wasn't complete enough to make the swipe plugins work)

No extra javascript code is necessary in the html file, it should work with the above (at least it did for me)

both very good free tools, thanks to the coders