Carousel Widget: Reveal Example

Using the Carousel Widget for revealing previous and next items

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

This example has the following dependencies:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>

This example uses progressive enhancement. So, the Carousel is created from an "ordered" list of elements.

<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'll have only one CSS rule to set the height for the Carousel items.

.yui-carousel-element li {
    height: 180px;
}

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

YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container", {
    revealAmount: 25
  });
  carousel.render(); // get ready for rendering the widget
  carousel.show();   // display the widget
}

Lets put the pieces together. The full JavaScript reads as follows:

(function () {
  var myLogReader, carousel;
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        carousel    = new YAHOO.widget.Carousel("container", {
          revealAmount: 25
        });
        
    carousel.render();
    carousel.show();
  });
})();