Swipeable card stack using Vue.js and interact.js

#1
Question 
[Image: swipe-card-stack.gif]



[/url]Swipeable card stack using Vue.js and interact.js


I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: "Wordguru") was to create a card game that anyone can play with their friends. You can see the outcome [url=https://wordguru.netguru.com/]here.
One element of the development process was to create an interactive card stack. The card stack had a set of requirements, including:
  • It should contain a few cards from the collection.
  • The first card should be interactive.
  • The user should be able to swipe the card in different directions that indicate an intent to accept, reject or skip the card.
[size=undefined]
This article will explain how to create that and make it interactive using Vue.js and interact.js. I created an example for you to refer to as we go through the process of creating a component that is in charge of displaying that card stack and a second component that is responsible for rendering a single card and managing user interactions in it.[/size]
[Image: 5c8f08b5fe55e12baae6fc54e46c343a.gif]
Reply




Users browsing this thread:
1 Guest(s)