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.8.2r1/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.8.2r1/build/carousel/carousel-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 }

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

### 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 deferred loading of items and Carousel's built-in paginator
- Multi-row example
- Pagination template example
- Using Paginator with Carousel
- Using the Carousel ARIA Plugin

### More Carousel Control Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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