jQuery Unslide - 触摸不起作用

Question

我已经解决了这个问题，我发帖只是为了帮助其他人节省一些时间。

我正在将 unslider 用于商业网站，我正在制作一个响应式网站，因此向滑块添加触摸支持的功能很有吸引力。不幸的是，正如作者声称的那样，它不能直接开箱即用。

Answer 1

截至今天（2014 年 11 月），滑动功能似乎已被移动取代。该插件的网址是 http://stephband.info/jquery.event.move/ 。只需导入这个而不是滑动。

我希望有人觉得这很有用。必须检查提交才能找出答案。

Answer 2

由于我是一个真正的菜鸟并且在安装 Jquery.event.swipe.js 模块时遇到了麻烦，所以我在这个问题上遇到了麻烦 现在已经解决了，但是像我这样的菜鸟一定要检查一下：

• 确保您的 projet 文件夹中有 github.com/stephband/jquery.event.move.js 和 github.com/stephband/jquery.event.swipe.js
• 在您的 html 文件中引用这两个文件
• 确保您的 projet 文件夹中也有 unslider.js 文件（我有 unslider.min.js 文件，但它不够完整，无法让滑动插件正常工作）

在 html 文件中不需要额外的 javascript 代码，它应该可以与上述内容一起使用（至少它对我有用）

这两个非常好的免费工具，感谢编码人员

Answer 3

这对我不起作用，但经过大量调整后，我让它顺利运行。我一步一步地在博客上写了我所做的，但不知道为什么。 http://frazer.livejournal.com/21898.html

我希望这会有所帮助，尤其是对 drupal 的新手。

简而言之 - 我将此添加到我的页面中，并且我得到了响应式动作：

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);
});

Answer 4

更新
我使用的 unslider 插件已经过时了。我是从我第一次找到它的 unslider.com 下载的（它仍然是一个过时的版本），因此我遇到了困难。

如需获取最新版本，请前往：https://github.com/idiot/unslider/

如果您想查看我的问题报告：https://github.com/idiot/unslider/issues/69

---

问题是作者已经4个月没有更新他的项目了，从那以后swipe事件就从$.event.swipe移到了$.event.special.swipe。

问题出现在 unslider 插件的第 108 行，它测试是否存在 swipe 插件。

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

只要改成：

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

这很容易解决，但需要一些谷歌搜索才能弄清楚。

如果您想确保它适用于早期版本，您可以这样做：

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

但我不建议这样做。

另外，作者没有提到这一点，但是swipe插件页面有，你的脚本中除了jquery.event.swipe之外还需要包含jquery.event.move。 p>

我希望这对某人有所帮助:)

---

回答下面的评论：

记住以正确的顺序包含所有文件，并记住所有文件：

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