# How to create tinder cards

**URL:** <https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004>\
**Category:** ionic-v3\
**Created:** [April 5, 2018, 2:25pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004 "2018-04-05T14:25:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rajbasilio](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@rajbasilio](https://forum.ionicframework.com/u/rajbasilio)\
**Post date:** [April 5, 2018, 2:25pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/1 "2018-04-05T14:25:45Z")

</div>

can someone tell me how to create tinder card effect in ionic

---

<div class="post-metadata">

**Author:** ![glimbeek](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@glimbeek](https://forum.ionicframework.com/u/glimbeek)\
**Post date:** [April 6, 2018, 12:58pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/2 "2018-04-06T12:58:10Z")

</div>

What have you tried? Can you show us some code? A jsfiddle or a codepen? What is it you are exactly asking for?

---

<div class="post-metadata">

**Author:** ![rajbasilio](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@rajbasilio](https://forum.ionicframework.com/u/rajbasilio)\
**Post date:** [April 6, 2018, 1:16pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/3 "2018-04-06T13:16:57Z")

</div>

nope i have created nothing. i want to make cards(swipeable cards) to fuction like this . ![cards](https://global.discourse-cdn.com/ionicframework/original/3X/a/b/ab33d865942583ae75d7544842f513c4acf3ba71.gif)

just swiping cards is enough

---

<div class="post-metadata">

**Author:** ![glimbeek](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@glimbeek](https://forum.ionicframework.com/u/glimbeek)\
**Post date:** [April 6, 2018, 1:38pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/4 "2018-04-06T13:38:54Z")

</div>

Would this be of use: [https://github.com/gajus/angular-swing](https://github.com/gajus/angular-swing)?

Or: [https://codepen.io/ionic/pen/nxEdH](https://codepen.io/ionic/pen/nxEdH)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [April 6, 2018, 2:02pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/5 "2018-04-06T14:02:25Z")

</div>

> **[peterpeterparker/ionic-swing](https://github.com/peterpeterparker/ionic-swing)**
>
> ionic-swing - A fork of swing.js and angular2-swing for Ionic without external hammerjs dependencies

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:42pm UTC](https://forum.ionicframework.com/t/how-to-create-tinder-cards/127004/6 "2021-07-19T21:42:02Z")

</div>