Small Scrolling List Pagination Plugin For jQuery - IDPaginate

IDPaginate is a lightweight jQuery plugin used to paginate long html list that allows to navigate between pages by scrolling the items just like a scroller.

How to use it:

1. Assuming you have a long html list like this:

<ul id="demo">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  ...
</ul>

2. Create an empty container to place the pagination controls.

<div class="idpaginate"></div>

3. Place jQuery library and the jQuery IDPaginate plugin's script into the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.idpaginate.min.js"></script>

4. Call the function on the html list to generate a pagination inside the DIV container you just created.

$('#demo').idpaginate();

5. Add your own CSS styles to the pagination controls. Or include the style sheet idpaginate.css in the header of the webpage.

.idpaginate { padding-bottom: 20px; }

.idpaginate a { margin-right: 5px; }

.idpaginate .idpaginate-next-disabled, .idpaginate .idpaginate-prev-disabled {
  color: #999;
  background: #fff;
  cursor: default;
}

.idpaginate .idpaginate-page-current {
  background: #e20000;
  color: #F5FFAF;
}

---

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