Glider

Glider is a Javascript glider control, based on script.aculo.us. It lets content glide in and out of a surrounding div in either horizontal or vertical direction.

Usage

Just include glider.js in your page and initialize the glider with

glider = new Glider($('glider'));

You can also specify the direction and parameters for the animation as well as a callback that will be invoked when the glider glides:

glider = new Glider($('glider', { direction: 'x', transition: Effect.Transitions.sinoidal, duration: .6 }, myCallBackFunction));

The glider’s direction defaults to horizontal (x). Additionally to the Glider class, there is the GliderLink class. Just instantiate a new GliderLink for all links on the page that are supposed to trigger the glider, e.g.:

$$('a[href^="#"]').each(function(link) {
    link = new GliderLink(link, glider);
  });

Setup of the HTML required for the glider to work is pretty straight forward. You need a surrounding div, a div that marks the list of sections the glider can glide and one div fore each section:

<div class="sections"&gt;
  <div class="section">
    section1