jQuery Unslide - 触摸无法使用

Question

jQuery Unslide - 触摸无法使用

javascriptjquerytouchresponsive-designslideshow

9

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

我正在为一个商业网站使用unslider，我正在制作响应式网站，因此添加触摸支持功能非常吸引人。不幸的是，它并不能像作者所声称的那样直接使用。

- André Snede

4个回答

0

这个对我没用，但是经过大量调整后，我成功地让它顺利运行了。我逐步记录了我所做的事情，但没有解释为什么。 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);
});

- Frazer Kirkman

请将答案内容发布在此处，以防链接失效。 - user972946

实际上，像这样修复unslider.js确实添加了滑动功能，但它看起来并不灵敏，只有完全的滑动才会使其移动。 - Frazer Kirkman

0

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

希望有人会发现这个有用。我不得不检查提交记录才能找到答案。

- rodrigovilla3

Swipe和Movie都是由Stephband制作的，而Move已经包含在内，因为Swipe依赖于它。 - André Snede

然而，直到我将滑动手势更改为移动手势，触摸功能才能正常工作。很奇怪，对吧？ - rodrigovilla3

-1

我在这个主题上遇到了问题，因为我是一个真正的新手，并且在安装Jquery.event.swipe.js模块时遇到了麻烦。

现在问题已经解决，但以下是一些像我这样的新手需要注意的事项：

确保您的项目文件夹中都有github.com/stephband/jquery.event.move.js和github.com/stephband/jquery.event.swipe.js
在您的html文件中引用这两个文件
确保您的项目文件夹中也有unslider.js文件（我只有unslider.min.js文件，这不足以使滑动插件正常工作）

在html文件中不需要额外的javascript代码，它应该可以使用上述方法（至少对我来说是这样）

这两个都是非常好的免费工具，感谢开发人员

- Maxence

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- André Snede · Accepted Answer

更新
我使用的unslider插件已经过时了。我最初在unslider.com上下载了它（那里仍然是一个过时的版本），因此我遇到了困难。

如果您需要获取最新版本，请访问：https://github.com/idiot/unslider/

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

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

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

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

但我不建议这样做。

另外，作者没有提到这一点，但滑动插件页面有提到，除了jquery.event.swipe，您还需要在脚本中包含jquery.event.move。

希望这能帮助某些人 :)

回答下面的评论：

记得按正确顺序包含所有文件，并记住它们全部：

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