Glider.js

This script makes it easy to create a sliding carousel component like the one seen at www.curbly.com. Inspired by www.panic.com/coda.

Example - Standard horizontal scrolling, auto-glide disabled

View source for HTML & CSS used.

Section 1 | Section 2 | Section 3 | Section 4 |
Section 1

You can put any kind of HTML in here:

Section 2

Style the sections however you want

Section 3

I-frames? Yes, but only if scrollbars are hidden:

Section 4

Flash? Sort-of works:

Previous | Next

Example - Vertical scrolling, auto-glide enabled, custom control links event (onmouseover)

Section 1

You can put any kind of HTML in here:

Section 2

Style the sections however you want

Section 3

I-frames? Yes, but only if scrollbars are hidden:

Section 4

Flash? Sort-of works:

Download

Visit the project page to download or check out the source via SVN.

Requirements

This script uses the Prototype javascript framework and the effects.js library from Scriptaculous. You must include Prototype version 1.5+ in your pages before including this script. This library is known to work in recent versions of IE 6/7, FireFox, and Safari.

Notes

You can create multiple gliders on one page.

You can determine which section will be scrolled to initially by using the initialSection option - i.e. {initialSection: 'section4'}}

You can make the Glider periodically update by using the autoGlide and frequency options - i.e. {autoGlide: true, frequency: 4}