Forum Academy Marketplace Showcase Pricing Features

Tinder-swipe with Hammer JS

Hi everyone. First of all, I really hope you all are doing fine in this global pandemic situation we are living on.

I’m building a tinder-like application and I can’t get the swipe functionality to work as I want. I’m using a combination of HTML, CSS and a Javascript code that runs when page is loaded but I don’t understand how I can apply this code to a RepeatingGroup.

All I have achieved so far is showing a stack of images (whose URL is generated randomly) that can be swiped very much in the way that it’s done on tinder. These are the steps I’m following:

1) I have an HTML block inside the page I’m working on. In this HTML I define a tag “board” and a class “card1”:

2) In the workflow, I run a Javascript code that handles the swipe gestures and adds the cards programatically. In this code, I use a function called push() in order to add new cards as the ones at the top-most level are swiped:

image

The thing is that I don’t want to define the class “card1” in the HTML code, but use a Group (that would be inside a RepeatingGroup), in order to have not only an image but all the details inside the Group and swipe it.

Anyone has done this before?

Thanks!