jQuery Plugin For Long Content Pagination/Slider Plugin - Text Pager

Text Pager is a jQuery plugin that divides the overflowed text within an fixed-height container into multiple DIVs so that you can navigate through these DIVs by clicking the page numbers or arrows, similar to a content slider.

How to use it:

1. Create a container containing long text as well as controls.

<div class="demo" id="text-pager">

... Your content goes here ...

<div class="controls"> 
<a class="tp-control-arrow-left unactive"><span><</span></a> 
<a class="tp-control-arrow-right"><span>></span></a>
<ul class="pager">
</ul>
</div>

</div>

2. Set height for the container.

.demo {
height: 400px;
}

3. Include the jQuery library and jQuery Text Pager Plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.textpager.js"></script>

4. Style the pager and arrows navigation via CSS.

.tp-control-arrows {
height: 40px;
float: left;
}
.tp-control-pages {
height: 40px;
}
.tp-control-arrow-left {
background: #777777;
color: #FFFFFF;
cursor: pointer;
float: left;
margin: 0 5px;
padding: 10px;
}
.tp-control-arrow-right {
background: #777777;
color: #FFFFFF;
cursor: pointer;
float: left;
margin: 0 5px;
padding: 10px;
}
.tp-control-arrow-left.unactive {
background: #eee;
}
.tp-control-arrow-right.unactive {
background: #eee;
}
.tp-page {
background: #777777;
color: #FFFFFF;
cursor: pointer;
float: left;
margin: 0 5px;
padding: 10px;
}
.tp-page.active {
background: #ff0000;
color: #FFFFFF;
}

5. Call the plugin with options.

<script>
$('#text-pager').textpager({
controlArrows: ".controls",
controlPages: ".controls .pager",
controlPagesContent: "li"
});
</script>

---

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