Using Ajax for deferred loading of items
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
/* Style the spotlight container */
#spotlight {
border: 1px solid #ccc;
height: 240px;
margin: 10px auto;
padding: 1px;
text-align: center;
width: 240px;
}
#carousel {
margin: 0;
}
#container {
margin: 0 auto;
}
.yui-skin-sam .yui-carousel-nav ul,
.yui-skin-sam .yui-carousel-nav select {
display: none;
}
.yui-carousel-element li {
height: 75px;
width: 75px;
}
Using Ajax for deferred loading of items
This example showcases the dynamic loading capabilities of the YUI Carousel Control. The YUI Carousel Control exposes an event called loadItems. This
event is fired whenever the Carousel needs items to be loaded into it for
display. Subscribing to this event makes it easy to dynamically load
the next set of images.