YUI Library Home

Site Search (YDN & YUIBlog):

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

View example in new window.

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

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

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

<div id="container"> <ol id="carousel"> <li> <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg" width="75" height="75"> </li> <li> <img src="http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg" width="75" height="75"> </li> </ol> </div>

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

/* Always be sure to give your carousel items a width and a height */ .yui-carousel-element li { width: 75px; height: 75px; } .yui-carousel-element .yui-carousel-item-selected { border:0; /* Override selected item's dashed border so it feels more like a photo album */ }

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.

YAHOO.util.Event.onDOMReady(function (ev) { var carousel = new YAHOO.widget.Carousel("container", { // specify number of columns and number of rows numVisible: [3,2] }); 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.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

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

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