Skip to content

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

Notifications You must be signed in to change notification settings

junedchhipa/stacked-cards

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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();

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published