Lightweight jQuery Tabbed Content & Pagination Plugin - TabPager

File Size: 33.2 KB
Views Total: 10178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Tabbed Content & Pagination Plugin - TabPager

TabPager is a simple lightweight jQuery plugin that generates dynamic pagination links for your long tabbed content.

How to use it:

1. Load jQuery library and the jQuery tabPager plugin's CSS and Javascript in your document.

<link href="css/jquery.tabpager.css" rel="stylesheet">
<script src="//"></script>
<script src="js/jquery.tabpager.min.js"></script>

2. Create a tabs interface with long tabbed content.

<ul id="tab">

<div id="wrapper"> 

  <div class="contents">

  <div class="contents">

  <div class="contents">

  <div class="contents">


3. Call the plugin and enable the tabs interace & pagination controls.

$(document).ready(function() {

//  maximum visible items
items: 5,

// CSS class for tabbed content
contents: 'contents',

// transition speed
time: 300,

// text for previous button
previous: '&laquo;Prev',

// text for next button
next: 'Next&raquo;',

// initial tab
start: 1,

// top or bottom
position: 'top',

// scrollable
scroll: true

Change log:


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