YUI Library Home

YUI Library Examples: Carousel Control: Multi-row example

Carousel Control: Multi-row example

This example uses the YUI Carousel Control to showcase a simple multi-row Carousel. The numVisible configuration setting now accepts an array, which instructs Carousel to organize its items into X number of rows by Y number of columns.

A multi-row Carousel still offers all the features provided by a single-row carousel including, but not limitted to: isVertical, animation, revealAmount, loadItems, and items containing images and text.

Using the Carousel Widget To Organize Images Into Rows and Columns

Here we will use the YUI Carousel Control's numVisible configuration setting to display an album of images.

This example has the following dependencies:

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

Make sure all carousel items have a width and height; even if multi-row has not been enabled.

Since we have the elements in place, we enable multi-row by passing Carousel's constructor the numVisible property set to an array specifying X columns by Y rows.

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 © 2011 Yahoo! Inc. All rights reserved.

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