YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

## 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:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

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

<div id="container"> <ol> <li> <img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg" height="180" width="240"> </li> <li> <img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg" height="180" width="240"> </li> </ol> </div>

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

.yui-carousel-element li { height: 180px; }

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

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container", { revealAmount: 25 }); carousel.render(); // get ready for rendering the widget carousel.show(); // display the widget }

### Carousel Control Examples:

- Spotlight example
- Circular Carousel example
- Partially revealing previous and next items
- Using both images and text within an item
- Using Ajax for deferred loading of items
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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