Slider Pagination Concept

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.
Slider Pagination Concept

From our sponsor: Try Mailchimp today.

A pagination is an essential part of any content-rich website, such as a magazine or a blog. The classic pagination will consist of linked numbers and some maybe some arrows, a presentation that has its limits. If you have a lot of pages to show, your pagination will either grow out of proportion breaking the design, or, if you don’t want to show all pages, you’ll need to add some kind of access point for the pages in between, requiring an additional user action.

Thinking about a way to navigate pages in a more compact and novel way, we tried our luck with the jQuery UI slider. The idea of using a slider for this came from this brilliant Number Slider pen by simurai.

With a slider pagination we can reach any page quickly by just dragging the handle. Adding a set of arrows makes it easy to navigate to the previous or next page.

The main idea is to initially just show a little button with two arrows. The button shows the current page number and clicking on the arrows will navigate to the next or previous page:


Clicking on the button will make the slider appear; the button handle will be animated to the correct part of the slider. Now we can drag the slider to the desired page. Once we release the handle to drop it, the slider will go back to the initial state, with the updated page number:


Using a slider of this kind will not break a layout when there are many pages to display. It does require an additional click, though. But it might as well be a bit more fun to navigate 🙂

What do you think? Is is going into an interesting direction for navigating pages or do you prefer the classic way?
Make sure to explore the project and let us know what you think.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 32

Comments are closed.
  1. Hi this is really nice tool to use and i like it very much i loved it can you please help me on my below query

    in my local system study website im using the this script where i get the list of 6 books on clicking on that book i marked it as read or pending after submit i need to refresh the specific pagination say page 2 with the updated information so how should i do refresh of the pagination here please help me in this


  2. Hi, i have reading out and i will definitely bookmarrk your site, just wanted to say i liked this article.

  3. It’s a great solution!!! Only one visualization tip, when you click the arrows in Firefox (for example) the outline is very ugly, and it can be removed adding outline:none; to .sp-slider-wrapper nav a {}

    Thanks for sharing your magic.

  4. I have a basic question for you: how do you map the numbers in the slider to pages you would like to display? i.e. #1 might be home, #2 might be product page 3, #4 might be product page 12…how do I set this up so that number 42 is a known page? Does this work off of a list I build of some sort? That might work to help map the digits to actual html pages.

  5. Supercool and very useful. It would be even more useful if the slider would show up when user tries to drag the circle – on the mousedown event, not on click. Anyway, awesome!