YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Home - YUI2 Archives

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:

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.

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.

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:

More Carousel Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings