PaginationSlider – a jQuery plugin
I have started using jQuery – JavaScript framework almost end of the last year. I have also used it for my last couple of projects. I find it very useful to design/develop complex type of functionality in the client-end. One of the interesting feature of jQuery is that it provides a large number of plugins designed by different developers. They are very useful too.
In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.
It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.
Code example:
Script section –
[code lang=”javascript”]
[/code]
Style section –
[code lang=”css”]
.pgSlider {
width: 80px; overflow: auto; background:#fff; margin:0 auto; position:relative; border:1px solid orange; float:left; display:inline;
}
.pgSlider ul {
display: block; padding: 0; margin: 0; list-style: none; position:relative;
}
.pgSlider ul li {
display: block; float: left; background:#E3ECF4;
}
.pgSlider a {
display: block; text-decoration: none; text-align:center; padding: 5px 8px; color:#1079B1; font-weight:bold; border-right:1px solid #fff;
}
[/code]
HTML Section –
[code lang=”html4strict”]
[/code]
I will eagerly wait for your reviews on this plugin. Here you can view the demo.
