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">
  <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"
});