Question

我在我的网站上使用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中，但我只是没有得到任何东西。它什么都不做。没有刷卡，只是标准的褪色。

Answer 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]）＆gt; a.event.special.swipe.scrollSupressionThreshold＆amp;＆amp; b.preventDefault（）}} var e，f = c.originalEvent.touches？c.originalEvent.touches [0]：c，g = {time：（new Date） .getTime（），坐标：[f.pageX，f.pageY]，来源：一（c.target）}; b.bind（ “touchmove”，d）。一（ “touchend”，函数（）{b。解除绑定（ “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 || {设置：功能（）{A（本）.bind（ “滑动”，a.noop）}}，a.event.special .swiperight = a.event.special.swiperight || 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**
      });

Cycle2滑动手势在任何移动设备上都不起作用

1 个答案: