Stacked Card Slider Plugin With jQuery And CSS3 - paperstack

paperstack is a jQuery plugin to create a stacked, Polaroid Gallery-style card slider that the users are able to navigate between sheets with a subtle shuffle effect.

How to use it:

1. Add stacked sheets to the card slider as this:

<div class="stack">
  <div class="sheet">Page 1</div>
  <div class="sheet">Page 2</div>
  <div class="sheet">Page 3</div>
  <div class="sheet">Page 4</div>
  <div class="sheet">Page 5</div>
  ...
</div>

2. Create a slider control to navigate between those sheets.

<a id="prev">&lt;</a>
<a id="next">&gt;</a>

3. Style the stacked sheets in your CSS.

.stack {
  position: relative;
  width: 400px;
  margin: 30px auto;
}

.stack > .sheet {
  position: absolute;
  transition: all 300ms ease-in-out;
  display: block;
  padding: 20px;
  background: white;
  width: 100%;
  height: 300px;
  left: 0;
  overflow: auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

4. Place jQuery library and the jQuery paperstack plugin at the end of the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="paperstack.js"></script>

5. Call the function to initialize the card slider.

var stack = $('.stack').paperstack({});

6. The JavaScript to active the slider navigation links.

$('#next').click(stack.next);
$('#prev').click(stack.previous);

---

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