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.

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:

1<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/carousel/assets/skins/sam/carousel.css"> 
2<script src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-dom-event.js"></script> 
3<script src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script> 
4<script src="http://yui.yahooapis.com/2.8.1/build/carousel/carousel-min.js"></script> 
view plain | print | ?

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

1<div id="container"> 
2    <ol id="carousel"> 
3        <li> 
4            <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg" 
5                width="75" height="75"> 
6        </li> 
7        <li> 
8            <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg" 
9                width="75" height="75"> 
10        </li> 
11        <li> 
12            <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg" 
13                width="75" height="75"> 
14        </li> 
15        <li> 
16            <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg" 
17                width="75" height="75"> 
18        </li> 
19        <li> 
20            <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg" 
21                width="75" height="75"> 
22        </li> 
23        <li> 
24            <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg" 
25                width="75" height="75"> 
26        </li> 
27        <li> 
28            <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg" 
29                width="75" height="75"> 
30        </li> 
31        <li> 
32            <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg" 
33                width="75" height="75"> 
34        </li> 
35        <li> 
36            <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg" 
37                width="75" height="75"> 
38        </li> 
39        <li> 
40            <img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg" 
41                width="75" height="75"> 
42        </li> 
43        <li> 
44            <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg" 
45                width="75" height="75"> 
46        </li> 
47        <li> 
48            <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg" 
49                width="75" height="75"> 
50        </li> 
51        <li> 
52            <img src="http://farm1.static.flickr.com/80/259391136_6fa405c7f6_s.jpg" 
53                width="75" height="75"> 
54        </li> 
55        <li> 
56           <img src="http://farm1.static.flickr.com/87/258609416_bf0d44b445_s.jpg" 
57                width="75" height="75"> 
58        </li> 
59        <li> 
60           <img src="http://farm1.static.flickr.com/119/259395209_66c773a072_s.jpg" 
61                width="75" height="75"> 
62        </li> 
63        <li> 
64           <img src="http://farm1.static.flickr.com/83/259399727_3d170d0445_s.jpg" 
65                width="75" height="75"> 
66        </li> 
67        <li> 
68           <img src="http://farm1.static.flickr.com/121/258614620_16eb6867f7_s.jpg" 
69                width="75" height="75"> 
70        </li> 
71        <li> 
72           <img src="http://farm1.static.flickr.com/108/259397333_3e4a3960bd_s.jpg" 
73                width="75" height="75"> 
74        </li> 
75    </ol> 
76</div> 
view plain | print | ?

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

1/* Always be sure to give your carousel items a width and a height */ 
2.yui-carousel-element li { 
3    width: 75px; 
4    height: 75px; 
5} 
6
7.yui-carousel-element .yui-carousel-item-selected { 
8    border:0; /* Override selected item's dashed border so it feels more like a photo album */ 
9} 
view plain | print | ?

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.

1YAHOO.util.Event.onDOMReady(function (ev) { 
2    var carousel = new YAHOO.widget.Carousel("container", { 
3        // specify number of columns and number of rows 
4        numVisible: [3,2] 
5    }); 
6    carousel.render(); // get ready for rendering the widget 
7    carousel.show();   // display the widget 
8} 
view plain | print | ?

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:

Logger Console

ERRO 2176ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2175ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2175ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2175ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2174ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2174ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2173ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2173ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2173ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2172ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2172ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2171ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2171ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2171ms (+1) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2170ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2170ms (+0) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2170ms (+4) 1:39:28 AM:
Carousel
Unable to find sibling
ERRO 2166ms (+3) 1:39:28 AM:
Carousel
Unable to find sibling
CARO 2163ms (+2) 1:39:28 AM:
global
Found Carousel - OL (#carousel)
CARO 2161ms (+0) 1:39:28 AM:
global
Component initialization
CARO 2161ms (+61) 1:39:28 AM:
global
Component creation
INFO 2100ms (+2099) 1:39:28 AM:
LogReader  instance0
LogReader initialized
INFO 1ms (+0) 1:39:25 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More Carousel Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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