Triggering Hammer.js drag/slide behavior on mouse click

Question

I'm using Hammer.js to allow for dragging between panes. I also want to allow an alternate action where there's also a "Next" button you can click on (with a mouse) or touch (on touchscreen), that will automatically animate a slide to the next screen.

Imagine the Hammer.js Carousel demo with a "next" button in the middle of the page. When you click, it acts as if you did a slideleft to take you to the next pane.

I figured I should be able to trigger with something like:

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

That only seems to put my mouse into drag mode, rather than executing the whole animation.

Answer 1

I've run into the same problem. self.next() will evidently not work as the next function is not defined in the self element.

You need to initizalize a new carousel instance, and then call the showPane(index) method:

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

This code will move the the second pane (index = 1). You can of course put a variable there.