在鼠標單擊時觸發Hammer.js拖動/滑動行為

Question

我正在使用Hammer.js來允許在窗格之間拖動。 我還想允許一個替代動作，其中還有一個“下一步”按鈕，您可以單擊（使用鼠標）或觸摸（在觸摸屏上），這將自動將幻燈片設置為下一個屏幕的動畫。

想象一下Hammer.js Carousel演示 ，在頁面中間有一個“下一步”按鈕。 當您單擊時，它就像您執行了一個滑動左移，即可轉到下一個窗格。

我想我應該能夠用以下方式觸發：

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

此代碼將移動第二個窗格（index = 1）。 你當然可以在那里放一個變量。