Skip to content

Latest commit

 

History

History
46 lines (33 loc) · 1.04 KB

README.md

File metadata and controls

46 lines (33 loc) · 1.04 KB
Raw

JPG

Give your content boxes a stacked cards look. A different approach to carousels/sliders.

GIF

Demo

View demo

ver 1.1 updates:
  • Swipe support added for mobile.
  • Removed "swapping of the cards on click" and replaced with "moving elements" to preserve the order of rendering.
  • Removed coverflow effect (transforms causing lot of trouble with z-index)

StackedCards Usage

1. Import css & js

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

2. 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>

3. Initialize StackedCards

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

	stackedCard.init();