Create Stackable And Switchable Cards With The Stacker Plugin

File Size: 5.92 KB
Views Total: 205
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Stackable And Switchable Cards With The Stacker Plugin

Stacker is a jQuery plugin for dynamically generating stacked cards that you can switch between them programmatically.

How to use it:

1. To begin with, load the Stacker plugin after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/stacker.js"></script>

2. Insert the content into the cards. The demo page uses the knockout library to handle data binding when you switch between cards.

<div id="stack">
  ... Any Content Here ...

3. Attach the plugin to the card container.


4. Determine the maximum number of cards should be visible at a time. Default: 10.

  maxVisibleItems: 3 

5. Apply your own styles to the cards.

.stack { 
  /* wrapper */

.stack-item {
  /* item */ 

.stack-index {
  /* index */

6. Switch between the cards using the prev next methods:


7. Add & remove cards.


8. Fire an event every time an item is changed.

var stacker = $('#stack').stacker();
stacker.on("activeItemChanged", function (e) {
  // e.count
  // e.activeItemIndex
  // e.index
  // e.container

This awesome jQuery plugin is developed by geersch. For more Advanced Usages, please check the demo page or visit the official website.