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

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:

Download

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}