YUI Library Examples: Carousel Control: Multi-row example

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.0r4/build/carousel/assets/skins/sam/carousel.css">
2	<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-dom-event.js"></script>
3	<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
4	<script src="http://yui.yahooapis.com/2.8.0r4/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.


1	YAHOO.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 Library Examples: Carousel Control: Multi-row example

Using the Carousel Widget To Organize Images Into Rows and Columns

Configuration for This Example

YUI Logger Output:

Carousel Control Examples:

More Carousel Control Resources: