var stackedCard = new stackedCards({ selector: '.stacked-cards', layout: "slide", transformOrigin: "center", }); stackedCard.init();
var stackedCard = new stackedCards({ selector: '.stacked-cards', layout: "fanOut", transformOrigin: "bottom", }); stackedCard.init();
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();