Stupid Web Tricks: Sightglass - Yet Another Carousel

I wanted to make a quick HTML snippet and turn it into a carousel-type thingy. I'm calling this "Sightglass" to avoid confusion with more robust and ambitious carousel implementations.

Also, while most other implementations use list elements for the items (<li>), I decided to use <div> in case someone wanted to take that path for, uh... I dunno... whatever reason...

Viewing the source should be enough for those who care to use it. Once the HTML snippet is laid-out and the CSS written, create a new "Sightglass" object:

        var carouselyThing = new Sightglass(
          'sightglass', 
          'items', 
          { buttons: {left:'buttons-left', right:'buttons-right'} }
        );
        
        YAHOO.util.Event.addListener("next", "click", carouselyThing.next);
        YAHOO.util.Event.addListener("previous", "click", carouselyThing.previous);
        YAHOO.util.Event.addListener("first", "click", carouselyThing.first);
        YAHOO.util.Event.addListener("last", "click", carouselyThing.last);
      

Use YAHOO.util.Event to add corresponding Sightglass methods tp mouse event listeners on elements that you've tagged to as "next," "previous," "first," and "last." It should all work out magically after that :p.

The joke here is that with pure CSS, one can just set overflow:auto and pretty much get something functionally identical (with a slider as a bonus).

Dependencies: Uses YUI Utilities (utilities.js), part of the YAHOO User Interface Library.

.js source file