YUI Library: Carousel 2011-3-21 v2.

9
Simple Use Case: YAHOO.widget.Carousel Interesting Moments in Carousel YAHOO.widget.Carousel
See online docs for complete list of Carousel events. containerId (str)
Styles:
Passes back: cfg (Config)
.yui-carousel-element li { width: Ypx; height: Zpx; } Event Fires... the carousels configuration object
afterScroll After the viewport in the The indices of the first
Markup:
<div id="container"><ul><li>item</li></ul></div> Carousel has scrolled. and last items in the YAHOO.widget.Carousel
viewport. Methods
Script: itemAdded After an item has been The content of the
var carousel = new YAHOO.widget.Carousel("container");
Manipulation:
added to the Carousel. inserted item and the
carousel.render(); addItem(String, index)
position where it is
addItems(array)
Creates a simple Carousel of items inside inserted.
replaceItem(String, index)
the list container (UL). pageChangeEvent When the Carousel Page number of the replaceItems(array)
navigates to a new page. current page. clearItems()
Carousel ships with a skin (left) that provides removeItem(int)
visual elements for the navigation controls. navigationStateChange When the state of the The state of the registerPagination(String)
Apply the CSS class yui-skin-sam to the navigation buttons change navigation buttons updatePagination()
body element or other parent element of your (enabled/disabled). (true if enabled, false
Carousels container in order to make use of otherwise)
Navigation:
the default skin. loadItems When the Carousel needs The first and last scrollBackward()
more items to be loaded visible items in the scrollForward()
for displaying them. Carousel and the scrollTo(int)
number of items to be
loaded. Rendering:
All Carousel events are Custom Events (see Event Utility docs); subscribe to these events render([String])
using their subscribe method: carousel.loadItems.subscribe(fnMyHandler);. renders current state to page
Event-specific arguments, if present, will be passed in an array as the second argument to show()
the event handler. Some events also have a before event to which you can subscribe. hide()

Selection:
Solutions
set(selectedItem, int)
Constructor: YAHOO.widget.Carousel Basic markup for a Carousel:
YAHOO.widget.Carousel([str container,] [,obj config]); <div id="container"> Other:
<ul> resets carousel to original state
Arguments: <li><img alt="" src="..."></li> carousel.set
(1) container: HTML ID or HTMLElement of existing markup to use </ul> (propName, propValue)
</div> carousel. get
when building Carousel. This should be a UL or an OL element.
(2) Configuration Object: JS object defining configuration properties Render a Carousel that scrolls automatically every two seconds and animating (propName)
for the Carousel instance. See Configuration section and online while scrolling:
docs for a list of these options. carousel = new YAHOO.widget.Carousel("container", {
autoPlayInterval: 2000, animation: { speed: 0.5 }
});
Carousel Options carousel.render();
Configure options using the constructor configuration object or set(), as described in Solutions carousel.startAutoPlay();
Carousel objects include several configurable options, including: There are two ways to configure options on your Carousel:
// 1. In the constructor, via an object literal:
animation isCircular numVisible carousel = new YAHOO.widget.Carousel("container", {
autoPlayInterval isVertical revealAmount isCircular: true
});
Dependencies // 2. Via "set":
carousel.set("isCircular", true);
Carousel requires YAHOO, Dom, Event and Element.
 YUI Library: Carousel 2011-3-21 v2.9
Multi-row Carousel Pagination Template
Styles:
.yui-carousel-element li { width: Ypx; height: Zpx; } Render a Carousel that displays pagination data:

Markup: var carousel = new YAHOO.widget.Carousel("container);

<div id="container"><ul><li>item</li></ul></div> carousel.registerPagination("<strong>Image</strong>
{firstVisible} - {lastVisible} <strong>of</strong>
Script: {numItems}");
var carousel = new YAHOO.widget.Carousel("container", { carousel.render();
numVisible: [ 3, 4 ]
}); After Carousel instantiation, we use the public registerPagination method to
carousel.render(); register a text or HTML template embedded with Carousel {tokens}.

Creates a simple multi-row Carousel of

items inside the list container (UL) to
display items in an album view layout.

Accomplished by setting Carousels
numVisible property to an array
containing the number of columns and
rows of items to display.
Items can be applied any width or height
via CSS and can contain more markup
than just image tags.
The public updatePagination method automatically substitutes each token with
its respective data on render and every time Carousels state changes.
Any combination of the following tokens can be embedded in your template:
numVisible, numPages, numItems, selectedItem, currentPage, firstVisible,
and/or lastVisible.

Other single-row Carousel events,

methods, and options are still available in multi-row including (but not limited to):
loadItems, animation, autoPlayInterval, isCircular, and isVertical.