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: Partially revealing previous and next items

Using the Carousel Widget While Partially Revealing Previous and Next Items

Here we will use the YUI Carousel Control's revealAmount configuration setting to reveal the previous and next items partially.

This example has the following dependencies:

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

<div id="container">
  <ol>
    <li>
      <img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg"
           height="180" width="240"> 
   </li>
  </ol>
</div>

We have only one CSS rule to set the height for the Carousel items.

Since we have the elements in place, we can invoke the Carousel's constructor with the revealAmount configuration to create the widget.

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