Responsive Card Slider/Swiper In JavaScript – stacked-cards

Category: Javascript , Recommended , Slider | August 20, 2019
Views Total:17,285 views
Official Page:Go to website
Last Update:August 20, 2019


Responsive Card Slider/Swiper In JavaScript – stacked-cards


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">
      Card 1
      Card 2
      Card 3

Initialize the card slider and done.

var stackedCardSlide = new stackedCards({ selector: '.example' });

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"


You Might Be Interested In:

One thought on “Responsive Card Slider/Swiper In JavaScript – stacked-cards

Leave a Reply