在鼠标单击时触发 Hammer.js 拖动/滑动行为

Question

我正在使用 Hammer.js 来允许在窗格之间拖动。我还想允许一个替代操作，其中还有一个“下一步”按钮，您可以单击（用鼠标）或触摸（在触摸屏上），它会自动将幻灯片动画化到下一个屏幕。

想象一下Hammer.js Carousel demo 在页面中间有一个“下一步”按钮。当您单击时，它就像您向左滑动一样将您带到下一个窗格。

我想我应该可以通过以下方式触发：

var hammertime = Hammer('button.next-button').on("tap", function(event) {
    self.next();        
});

这似乎只是让我的鼠标进入拖动模式，而不是执行整个动画。

Answer 1

我遇到了同样的问题。 self.next() 显然不起作用，因为下一个函数没有在 self 元素中定义。

你需要初始化一个新的轮播实例，然后调用showPane(index)方法：

      var hammertime = Hammer(doubletapRegion).on("tap", function (event) {
          console.log(event);
          var carousel = new Carousel("#carousel");
          carousel.init();
          carousel.showPane(1);
      });

此代码将移动第二个窗格（索引 = 1）。你当然可以在那里放一个变量。