Stacked Cards
Give your content boxes a stacked cards look with each card swapping with other.

Slide


	var stackedCard = new stackedCards({
	 	selector: '.stacked-cards',
	 	layout: "slide",
	 	transformOrigin: "center",
	});

	stackedCard.init();

FanOut


	var stackedCard = new stackedCards({
	 	selector: '.stacked-cards',
	 	layout: "fanOut",
	 	transformOrigin: "bottom",
	});

	stackedCard.init();


Usage

1. Setup HTML Markup 

						
	<div class="mycards">
		<ul>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
		</ul>
	</div>

2. Add stackedCards.css & stackedCards.js into <head> You may add stackedCards.js before your closing </body> tag 

						
	<link rel="stylesheet" type="text/css" href="stackedCards.css"/>
	<script src="stackedCards.js"><script>

3. Initialize the stackedCards in your script file 

						
	var stackedCard = new stackedCards({
	 	selector: '.mycards',
	 	layout: "slide",
	 	transformOrigin: "center",
	});

	stackedCard.init();