YUI Library Home

YUI Library Examples: Carousel Control: Partially revealing previous and next items

Carousel Control: Partially revealing previous and next items

This example showcases a simple yet powerful feature of the YUI Carousel Control. In this example, the Carousel displays the previous and next elements partially, giving a sneak peak of the upcoming image to the user. The revealAmount configuration setting accepts the percentage of the width of an item to reveal.

Using the Carousel Widget While Partially Revealing Previous and Next Items

Here we will use the YUI Carousel Control's revealAmount configuration setting to reveal the previous and next items partially.

This example has the following dependencies:

This example uses progressive enhancement; the Carousel is built from an existing ordered list.

We have only one CSS rule to set the height for the Carousel items.

Since we have the elements in place, we can invoke the Carousel's constructor with the revealAmount configuration to create the widget.

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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