Responsive Card Slider/Swiper In JavaScript

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

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 section. You may add stackedCards.js before your closing 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();

Download Details:

Author: junedchhipa

Live Demo: https://junedchhipa.github.io/stacked-cards/

GitHub: https://github.com/junedchhipa/stacked-cards

#javascript #programming