YUI Library Home

YUI Library Examples: Carousel Control: Using both images and text within an item

Carousel Control: Using both images and text within an item

This example uses the YUI Carousel Control to showcase an example where each (list) item contains an image and some text. As always, you can use arrow keys to select items or to click on an item to select it.

Also in this example, you will see the animation capabilities available in the YUI Carousel Control. For getting an animated effect during scroll, you will have to set the animation configuration setting in the constructor and include the YUI Animation Utility on the page.

Using the Carousel Widget for displaying items with images and text

This example has the following dependencies:

This example uses progressive enhancement, creating the control from an ordered list.

Apart from setting the height of the Carousel, we have a few additional CSS rules for this example to position the text and the images within the Carousel items.

Since we have the elements in place, we can now invoke the Carousel's constructor to create the widget. We'll pass an additional argument to the constructor to set the animation speed. The animation configuration setting is an object that takes the animation speed (to scroll) in seconds and the animation effect.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

More Carousel Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings