Author: | junedchhipa |
---|---|
Views Total: | 16,030 views |
Official Page: | Go to website |
Last Update: | August 20, 2019 |
License: | MIT |
Preview:

Description:
A responsive, mobile-friendly card slider/swiper which enables the user to switch between stacked card items through click and touch swipe events.
Built with vanilla JavaScript, CSS/CSS3 and plain HTML.
How to use it:
Download and import the necessary JavaScript & CSS files from the dist
folder.
<link href="./dist/stackedCards.css" rel="stylesheet" /> <script src="./dist/stackedCards.min.js"></script>
Create a list of stacked cards into a container element with the CSS class of stacked-cards.
<div class="stacked-cards example"> <ul> <li> Card 1 </li> <li> Card 2 </li> <li> Card 3 </li> ... </ul> </div>
Initialize the card slider and done.
var stackedCardSlide = new stackedCards({ selector: '.example' }); stackedCardSlide.init();
To generate a fan layout, set the layout
option to fanOut
.
var stackedCardSlide = new stackedCards({ layout: "fanOut" });
Change the position of transformed card items. Default: center
.
var stackedCardSlide = new stackedCards({ transformOrigin: "bottom" });
what about next and previous buttons?