CODEWITHSUNDEEP
javascripthorizontal-scrollinghammer.js
Voodoo
Voodoo

Reputation: 1024

Triggering Hammer.js drag/slide behavior on mouse click

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.

Upvotes: 2

Views: 3060

Answers (1)

Michael
Michael

Reputation: 363

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.

Upvotes: 4

Related Questions