Cycle2 滑动手势不适用于任何移动设备答案

【问题标题】：Cycle2 Swipe gesture does not work on any mobile deviceCycle2 滑动手势不适用于任何移动设备
【发布时间】：2015-11-15 21:55:44
【问题描述】：

我在我的网站上使用 Cycle2，并希望在移动设备上添加对滑动功能的支持。

我没有使用 jQuery mobile，所以我为 Swipe 添加了 Cycle2 support plugin。我已将此添加到名为 site.js 的文件中，该文件在 jQuery 之后直接加载，因此它应该可用。

我已将以下内容添加到我的页面以使滑动手势起作用：

echo '<div class="cycle-slideshow"
   data-cycle-pause-on-hover="true"
   data-cycle-swipe="true"
   data-cycle-swipe-fx="scrollHorz"
   data-cycle-pager=".cycle-pager">';

但我在移动设备上没有收到任何回复。我也没有收到任何错误消息。我检查过它没有缓存文件，并且插件在site.js 中，但我什么也没得到。它什么也不做。没有滑动，只是标准的淡入淡出。

【问题讨论】：

标签： jquery jquery-mobile cycle2

【解决方案1】：

我也没有使用 Jquery mobile，所以你可以试试这段代码，但它会响应但不是那么流畅

添加这个插件：

/* Cycle2 的滑动插件；版权所有 (c) 2012 M. Alsup； v20141007 */ !function(a){"use strict";a.event.special.swipe=a.event.special.swipe||{scrollSupressionThreshold:10,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:75,setup:function() {var b=a(this);b.bind("touchstart",function(c){function d(b){if(g){var c=b.originalEvent.touches?b.originalEvent.touches[0] :b;e={time:(new Date).getTime(),coords:[c.pageX,c.pageY]},Math.abs(g.coords[0]-e.coords[0])>a .event.special.swipe.scrollSupressionThreshold&&b.preventDefault()}}var e,f=c.originalEvent.touches?c.originalEvent.touches[0]:c,g={time:(new Date).getTime(), coords:[f.pageX,f.pageY],origin:a(c.target)};b.bind("touchmove",d).one("touchend",function(){b.unbind("touchmove" ,d),g&&e&&e.time-g.timea.event.special.swipe.horizontalDistanceThreshold&&Math.abs(g.coords[1]-e.coords[1])e.coords[0]?"swipeleft":"swiperight" ),g=e=void 0})})}},a.event.special.swipeleft=a.event.special.swipeleft||{setup:function(){a(this).bind("swipe", a.noop)}},a.event.special.swiperight=a.event.special.swiperi ght||a.event.special.swipeleft}(jQuery);

然后在你的 js 文件中添加这段代码：

      $('#my-div div.slides').after('<nav id="pagination"></nav>');

      $('#my-div div.slides').cycle(
      {
        fx: "scrollHorz",
        slides: ".slide1",
        timeout: 0,
        speed: 200,
        pager: "#pagination",
        pagerTemplate: "<a href='#'>{{slideNum}}</a>",
        pagerActiveClass: "active",
        **swipe: true**
      });

【讨论】：