YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
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.
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.9.0/build/carousel/assets/skins/sam/carousel.css"> |
2 | <script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-dom-event.js"></script> |
3 | <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script> |
4 | <script src="http://yui.yahooapis.com/2.9.0/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 | ? |
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.
INFO 153ms (+1) 10:49:38 AM:
LogReader instance0
LogReader initialized
INFO 152ms (+1) 10:49:38 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 151ms (+0) 10:49:38 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 151ms (+151) 10:49:38 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 10:49:38 AM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings