Making the Carousel Widget to display items in a loop

Here we will use the YUI Carousel Control'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.8.0r4/build/carousel/assets/skins/sam/carousel.css"> <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-dom-event.js"></script> <script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.8.0r4/build/carousel/carousel-min.js"></script>

This example uses progressive enhancement to build the Carousel 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, numVisible: 1 }); carousel.render(); // get ready for rendering the widget carousel.show(); // display the widget }

Configuration for This Example

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.