Paginator

$.fn.paginator

About Paginator

Paginator is a very simple jQuery addon that implements containers with multiple "pages" (hence the name) of which one is always active/shown, the others ususally hidden.

Paginator aims to be simple to use, rich in animations (page transitions) while keeping variants on those easy to implement, and basically an all-round tool for carousels or image galleries.

Paginator is WIP, please report any bugs on Github.

Download

Grab a copy from github or simply download/link the CSS and JavaScript files from here:

paginator.css paginator.jquery.js

CSS Transitions

The transision between pages can be soley defined using CSS classes. There are a few basic classes that are applied to the page elements depending on their current state:

This is very simple to implement, but does not work with touch-and-drag for obvious reasons.

1
2
3
4
5

Javascript Transitions

Using a single function, a transformation can be implemented that defines CSS properties for each page depending on its current offset.

1
2
3
4
5

Different Sizes

1
2
3
4
5

Code Interaction

1
2
3
4
5
Fork me on GitHub