Carousel Component Helps Yahoo! UI JavaScript Library Handle Scrollable Content

JavaScriptSearch
Thursday, July 20, 2006; 07:37 AM

The Carousel component for theYahoo! User Interface (YUI) Library is a useful addition to the popular JavaScript/AJAX development framework.  By using both in conjunction, any web developer can create an interactive scrollable content display (for example, an image gallery).  The project website is located at http://billwscott.com/carousel/.

In the words of author Bill Scott: "The Carousel widget provides a way to display HTML elements either horizontally or vertically with or without animated scrolling. The loading of elements is separated from the component allowing the carousel to manage static HTML elements or dynamically generated content (DHTML or AJAX)."

Implementing Carousel in a simple application is a matter of including a few lines in the HTML document.  This is true for either image galleries or text content.  In order to function properly, the Carousel component requires several of the YUI scripts. Documentation is provided.

Carousel can be tweaked to create autoplaying image galleries, scrollable lists, tabbed displays, several "Carousels" on a single page, and more.  The project is currently in development and new features are being planned and queued for implementation. 

The Carousel package contains a lightweight JavaScript file for the functionality and a Cascading Stylesheets file that manages the position and look of the various elements on the page. All code is licensed under the Creative Commons Attribution 2.5 License, which allows free use and modification. Carousel is compatible with many modern browsers, including Opera and Camino.

Additionally, the Carousel component can be downloaded as a part of a 800KB archive, which contains the required YUI files and examples.

For the advanced user: A Carousel gallery, using AJAX and the Yahoo! Trip Planner API to fetch external images in real time.