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 ...
</div>

3. Attach the plugin to the card container.

$(function(){
  $('#stack').stacker();
});

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

$('#stack').stacker({ 
  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:

$('#stack').stacker('previous');
$('#stack').stacker('next');

7. Add & remove cards.

$('#stack').stacker('add');
$('#stack').stacker('remove');

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.