Carousel Widget: Circular Example

Making the Carousel Widget to display items in a loop

Here we will use the YUI Carousel Widget's "isCircular" configuration setting to make the Carousel into a loop.

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/69/213130158_0d1aa23576_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/59/213129191_b958880a96_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/92/214077367_77ae970965_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/81/214076446_18fe6a6c91_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/93/214075781_0604edb894_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/40/214075243_ea66c4cb31_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/67/214074120_33933bf232_d.jpg"
           height="375" width="500">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/79/214073568_f16d1ffce7_d.jpg"
           height="375" width="500">
    </li>
  </ol>
</div>

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

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

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

YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container", {
    isCircular: true
  });
  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", {
          isCircular: true
        });
        
    carousel.render();
    carousel.show();
  });
})();