jQuery.SerialScroll

prev
next

This plugin can be used for navigation purposes. You decide how many to show at a time with CSS.
The items don't need to be aligned, you can spread them as much as you want, it will always find them :)
Check jQuery.ScrollTo's demo if you want to create the perfect animation. You can use its settings too!


You can also build slideshows with it. In this case, I centered the photos and made them clickable.
I set this one to cycle, try going over the last photo. I'm using a special easing equation.
You are allowed to interrupt the animation by clicking again. You can't do that in the first one.

News 1

Nullam a leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas mollis vestibulum purus, rutrum sed.

News 2

Phasellus nunc ipsum, faucibus non, iaculis ac, sagittis malesuada, augue. Aliquam sollicitudin. Cras iaculis lorem sit amet.

News 3

Morbi condimentum. Sed id nunc eu arcu aliquet bibendum. Maecenas vestibulum eros fringilla tortor. Nunc purus.

News 4

Sed condimentum. Duis orci. Ut odio leo, dapibus pretium, rhoncus a, sodales eu, nibh. Vivamus consectetuer vestibulum.

News 5

Pellentesque varius ligula et enim. Nulla ut purus vel magna ullamcorper vestibulum. Aliquam at enim at ligula bibendum.

News 6

Suspendisse id quam at lectus placerat dignissim. Praesent nulla urna, rutrum sed. Maecenas vitae libero ac elit.

News 7

Etiam aliquet. Nulla consectetuer, nibh ut gravida consectetuer, nisl enim vestibulum nibh. Suspendisse potenti.

News 8

Aliquam porta, nisi id aliquam posuere, enim mi bibendum tellus, non venenatis nisi orci at mi. Curabitur placerat.

It can be used for news tickers as well. The plugin is not restricted to clicks or buttons.
Here the option 'lazy' is used and it works, click the buttons on the right if you don't trust me :)
You can also specify an interval for auto scrolling. To stop the animation, use $().stop() on the container.

This demo shows 3 different uses of this plugin. It can certainly be used for others purposes as well.
Note that it can be used with any html. This is not a widget and the examples are just improvised.
Use "View source" to see the different calls and markup. All the settings are commented.

This plugin won't modify your html at all, won't even touch a single style.
It gives you full control over the markup and the look, that's your part of the job :)
You can control the animation from outside with the 3 exposed events (prev, next, goto).
Guess what ? If you manage to show them scrollbars, users with no javascript can still navigate your content!