How do I get Ionic cards to stack?

I am trying to make tinder cards so when you swipe it shows another card underneath. It works fine but I can’t get the cards to stack on top of each other. It instead lists the cards as if it is a vertical list. My code is pretty basic but here is a snippet:

<td-cards>
<td-card ng-repeat="image in vm.imageArray" on-destroy="vm.cardDestroyed($index)" on-swipe="vm.cardSwiped($index)" on-swipe-left="vm.onSwipeLeft()" on-swipe-right="vm.onSwipeRight()">
</td-card>
</td-cards>

Is there some kind of directive or CSS rule I am not aware of?

Thanks.

You should be able to do this using CSS by adding a class to each card such as:

.layer-bottom {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 50px;
}

However z-index would need to increase by 1 for each card. i.e:

.layer-top {
position: absolute;
z-index: 2;
left: 0;
top: 0;
height: 50px;
}
1 Like

Thank you, this worked.

Hi, how did you figure out to make cards swipable ?

Yes, what is the problem?

I am new with ionic and i am loking for a way to make my cards swipables, i tried with swing packaga following a tutorial but it didn’t work, i am trying to implement it with itemSliding but i think thut would to be a better way, can you tell me how did you implement ?

thanks !!

I used this library to implement mine: https://github.com/ionic-team/ionic-ion-tinder-cards

My implementation:

		<td-cards>
		<td-card on-drag-right="vm.dragRight()" on-drag-left="vm.dragLeft()" on-release="vm.release($event)" on-touch="vm.setCoords()"
		on-partial-swipe="cardPartialSwipe(amt)" class = "{{moment.class}}">
			<mng-moment-view></mng-moment-view>
		</td-card>
		</td-cards>
	function setCoords() {
		vm.touchXposition = event.gesture.center.pageX;
	};

	function dragRight() {
		vm.moments[0].animate = '';
		vm.moments[0].swipedRight = true;
		vm.moments[0].swipedLeft = false;
	};

	function dragLeft() {
		vm.moments[0].animate = '';
		vm.moments[0].swipedLeft = true;
		vm.moments[0].swipedRight = false;
	};

	function release(event) {
		vm.moments[0].animate = 'invisible'
		var threshold = constants.HOW_FAR_USER_MUST_DRAG * $window.innerWidth;
		var releasedXposition = event.gesture.center.pageX;
		var distDragged = releasedXposition - vm.touchXposition;
		if(Math.abs(distDragged) > threshold) {
			if(distDragged > 0) {
				vm.liked(true);
			}
			else {
				vm.liked(false);
			}
		}
		else {
			vm.moments[0].swipedRight = false;
			vm.moments[0].swipedLeft = false;
		}
	};		

Basically you need to get the screen width which I do with $window.innerWidth. Multiply that by some constant of how far the user must drag. My constant is stored as a percent of the screen so I multiply it by the full width. Ex: Screen width is 720px * 0.3 of the screen. This means nothing will happen unless the user drags at least a third of the screen.

On release, you need to check to see if the distance dragged is greater than the threshold before you do any logic. The dragLeft and dragRight functions for me allows me to set some property on the object so that I can displahy an image to the user to notify him to he is dragging.

Good luck!

Thanks for your answer, do you know if this is working with ionic 2 ?

No idea. I use ionic 1