Tindercards.js

I wanted to create a similar experience to those cards that you can swipe left and right in Tinder, but with web technology. So I did. There are already 2 libs that do this but they’re based on Ionic which I didn’t want to have a dependency on. Tindercards.js only requires jQuery and Hammer.js.

The result looks like this:

Video demo

On YouTube: https://youtu.be/LqZ3wqvvZwE

Screenshot

Live Demo

Works best on iPhone: http://www.timo-ernst.net/misc/tindercardsjsdemo/

Dependencides

• jquery
• hammerjs (http://hammerjs.github.io)

Tested on

• iOS Safari

API Documentation

There are just two components that you need. A prototype object called Tindercardsjs.card and a method called Tindercardsjs.render. The signatures are like this:

/**
 * Representation of 1 card on the stack.
 * This is a prototype object! Initialize with "new" keyword
 *
 * @param {String} cardid Pass a unique id for each card so you know later which card is which
 * @param {String} name The name of the person on the card
 * @param {String} description The description text of that person
 * @param {String} imgpath The path to the img
 */
Tindercardsjs.card(cardid, name, description, imgpath)

/**
 * Renders the given stack into the given jQuery element.
 *
 * This is a method, just call it. Parameter "cards" must be an
 * array of Tindercardsjs.card
 *
 * @param {Array} cards An array of cards (@see Tindercardsjs.card)
 * @param {jQuery} target The target in which the stack should be rendered to
 * @param {function} onSwiped Callback function when swipe has occurred. Will pass an event object as parameter with properties event.cardid (the card id), event.card (The jQuery object that contains the card dom element) and event.direction ('left' or 'right').
 */
Tindercardsjs.render(cards, target, onSwiped)

How to use

1. Make sure you have hammer.js und jQuery referenced
2. Then, add tindercards.js from /lib
3. Initialize like this:

var cards = [
  new Tindercardsjs.card(2, 'Geordi Laforge', 'I like big butts', 'gfx/pics/01.jpg'),
  new Tindercardsjs.card(1, 'Agro Picard', 'Hates Klingons, likes beer.', 'gfx/pics/02.jpg'),
  new Tindercardsjs.card(0, 'Jean-Luc, Worf & William', 'Swipe right if you also like funny hats like us :D', 'gfx/pics/03.jpg')
];

And pass them to Tindercards.js like this:

Tindercardsjs.render(cards, $('#main'), function (event) {
  console.log('Swiped ' + event.direction + ', cardid is ' + event.cardid + ' and target is:');
  console.log(event.card);
});

The stack will then be rendered to a HTML container that has id “main”. You can of course change that to some other name if you want.

Important

The html container (in this case #main) should have either position:absolute or position:relative!

Download lib & example code

Grab it on GitHub