API: carousel YAHOO.widget.Carousel (YUI Library)

# Yahoo! UI Library

### Carousel Widget 2.9.0

Yahoo! UI Library > carousel > YAHOO.widget.Carousel
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.widget.Carousel - extends YAHOO.util.Element

The Carousel widget.

### Constructor

YAHOO.widget.Carousel `( el , cfg )`

Parameters:
  `el <HTMLElement | String>` The HTML element that represents the the container that houses the Carousel.
  `cfg <Object>` (optional) The configuration values

### Properties

#### _animObj - `private object`

The Animation object.

#### _carouselEl - `private object`

The Carousel element.

#### _clipEl - `private object`

The Carousel clipping container element.

#### _cols - `private object`

Number of cols for a multirow carousel.

#### _firstItem - `private object`

The current first index of the Carousel.

#### _hasFocus - `private object`

Does the Carousel element have focus?

#### _hasRendered - `private object`

Is the Carousel rendered already?

#### _isAnimationInProgress - `private object`

Is the animation still in progress?

#### _isAutoPlayInProgress - `private object`

Is the auto-scrolling of Carousel in progress?

#### _itemAttrCache - `private object`

Cache the Carousel item attributes.

#### _itemsTable - `private object`

The table of items in the Carousel. The numItems is the number of items in the Carousel, items being the array of items in the Carousel. The size is the size of a single item in the Carousel. It is cached here for efficiency (to avoid computing the size multiple times).

#### _navBtns - `private object`

The Carousel navigation buttons.

#### _navEl - `private object`

The Carousel navigation.

#### _nextEnabled - `private object`

Status of the next navigation item.

#### _pages - `private object`

The Carousel pages structure. This is an object of the total number of pages and the current page.

#### _pagination - `private object`

The Carousel pagination structure.

#### _prevEnabled - `private object`

Status of the previous navigation item.

#### _recomputeSize - `private object`

Whether the Carousel size needs to be recomputed or not?

#### _rows - `private object`

Number of rows for a multirow carousel.

#### BUTTON - `object`

The class name of the Carousel navigation buttons.
Default Value: "yui-carousel-button"

#### CAROUSEL - `object`

The class name of the Carousel element.
Default Value: "yui-carousel"

#### CAROUSEL_EL - `object`

The class name of the container of the items in the Carousel.
Default Value: "yui-carousel-element"

#### CONTAINER - `object`

The class name of the Carousel's container element.
Default Value: "yui-carousel-container"

#### CONTENT - `object`

The class name of the Carousel's container element.
Default Value: "yui-carousel-content"

#### DISABLED - `object`

The class name of a disabled navigation button.
Default Value: "yui-carousel-button-disabled"

#### FIRST_NAV - `object`

The class name of the first Carousel navigation button.
Default Value: " yui-carousel-first-button"

#### FIRST_NAV_DISABLED - `object`

The class name of a first disabled navigation button.
Default Value: "yui-carousel-first-button-disabled"

#### FIRST_PAGE - `object`

The class name of a first page element.
Default Value: "yui-carousel-nav-first-page"

#### FIRST_VISIBLE - `object`

The offset of the first visible item in the Carousel.
Default Value: 0

#### FOCUSSED_BUTTON - `object`

The class name of the Carousel navigation button that has focus.
Default Value: "yui-carousel-button-focus"

#### HORIZONTAL - `object`

The class name of a horizontally oriented Carousel.
Default Value: "yui-carousel-horizontal"

#### HORZ_MIN_WIDTH - `object`

The minimum width of the horizontal Carousel container to support the navigation buttons.
Default Value: 180

#### instances - `private static object`

The internal table of Carousel instances.

#### ITEM - `object`

The class name of the item.
Default Value: "yui-carousel-item"

#### ITEM_LOADING - `object`

The element to be used as the progress indicator when the item is still being loaded.
Default Value: The progress indicator (spinner) image CSS class

#### ITEM_LOADING_CONTENT - `HTML`

The content to be used as the progress indicator when the item is still being loaded. Inserted into DOM with innerHTML.
Default Value: "Loading"

#### MAX_PAGER_BUTTONS - `object`

The maximum number of pager buttons allowed beyond which the UI of the pager would be a drop-down of pages instead of buttons.
Default Value: 5

#### MIN_WIDTH - `object`

The class name that will be set if the Carousel adjusts itself for a minimum width.
Default Value: "yui-carousel-min-width"

#### MULTI_ROW - `object`

The class name of a multirow Carousel.
Default Value: "yui-carousel-multi-row"

#### NAV_CONTAINER - `object`

The class name for the navigation container for prev/next.
Default Value: "yui-carousel-buttons"

#### NAVIGATION - `object`

The navigation element container class name.
Default Value: "yui-carousel-nav"

#### NEXT_BUTTON_TEXT - `HTML`

The next navigation button name/text. Inserted into DOM with innerHTML.
Default Value: "Next Page"

#### NEXT_NAV - `object`

The class name of the next Carousel navigation button.
Default Value: " yui-carousel-next-button"

#### NEXT_PAGE - `object`

The class name of the next navigation link. This variable is not only used for styling, but also for identifying the link within the Carousel container.
Default Value: "yui-carousel-next"

#### NUM_VISIBLE - `object`

The number of visible items in the Carousel.
Default Value: 3

#### PAGE_FOCUS - `object`

The class name of the focussed page navigation. This class is specifically used for the ugly focus handling in Opera.
Default Value: "yui-carousel-nav-page-focus"

#### PAGER_ITEM - `object`

The class name for an item in the pager UL or dropdown menu.
Default Value: "yui-carousel-pager-item"

#### PAGER_PREFIX_TEXT - `HTML`

The prefix text for the pager in case the UI is a drop-down. Inserted into DOM with innerHTML.
Default Value: "Go to page "

#### PAGINATION - `object`

The class name for the pagination container
Default Value: "yui-carousel-pagination"

#### PREV_PAGE - `object`

The class name of the previous navigation link. This variable is not only used for styling, but also for identifying the link within the Carousel container.
Default Value: "yui-carousel-prev"

#### PREVIOUS_BUTTON_TEXT - `HTML`

The previous navigation button name/text. Inserted into DOM with innerHTML.
Default Value: "Previous Page"

#### ROW - `object`

The class name of a row in a multirow Carousel.
Default Value: "yui-carousel-new-row"

#### SELECTED_ITEM - `object`

The class name of the selected item.
Default Value: "yui-carousel-item-selected"

#### SELECTED_NAV - `object`

The class name of the selected paging navigation.
Default Value: "yui-carousel-nav-page-selected"

#### VERT_MIN_WIDTH - `object`

The minimum width of the vertical Carousel container to support the navigation buttons.
Default Value: 155

#### VERTICAL - `object`

The class name of a vertically oriented Carousel.
Default Value: "yui-carousel-vertical"

#### VERTICAL_CONTAINER - `object`

The class name of a vertical Carousel's container element.
Default Value: "yui-carousel-vertical-container"

#### VISIBLE - `object`

The class name of a visible Carousel.
Default Value: "yui-carousel-visible"

#### Properties inherited from YAHOO.util.Element:

`DOM_EVENTS`

#### Properties inherited from YAHOO.util.AttributeProvider:

`_configs`

#### Properties inherited from YAHOO.util.EventProvider:

`__yui_events, __yui_subscribers`

### Methods

#### _animateAndSetCarouselOffset

`protected void _animateAndSetCarouselOffset ( offset , item , sentinel )`
Set the Carousel offset to the passed offset after animating.

Parameters:
  `offset <Integer>` The offset to which the Carousel has to be scrolled to.
  `item <Integer>` The index to which the Carousel will scroll.
  `sentinel <Integer>` The last element in the view port.

#### _animationCompleteHandler

`protected void _animationCompleteHandler ( ev , p , o )`
Handle the animation complete event.

Parameters:
  `ev <Event>` The event.
  `p <Array>` The event parameters.
  `o <Object>` The object that has the state of the Carousel

#### _autoScroll

`protected void _autoScroll ( )`
Automatically scroll the contents of the Carousel.

#### _findClosestSibling

`protected void _findClosestSibling ( )`
Find the closest sibling to insert before

#### _focusHandler

`protected void _focusHandler ( ev )`
The "focus" handler for a Carousel.

Parameters:
  `ev <Event>` The event object

#### _getLastVisible

`protected void _getLastVisible ( )`
Get the last visible item.

#### _getNumPages

`protected void _getNumPages ( )`
Get the total number of pages.

#### _getSelectedItem

`protected Number _getSelectedItem ( val )`
Get the value for the selected item.

Parameters:
  `val <Number>` The new value for "selected" item

Returns: `Number`
  The new value that would be set

#### _getValidIndex

`protected Object _getValidIndex ( index )`
Return a valid item for a possibly out of bounds index considering the isCircular property.

Parameters:
  `index <Number>` The index of the item to be returned

Returns: `Object`
  Return a valid item index

#### _itemClickHandler

`protected void _itemClickHandler ( ev )`
The "click" handler for the item.

Parameters:
  `ev <Event>` The event object

#### _keyboardEventHandler

`protected void _keyboardEventHandler ( ev )`
The keyboard event handler for Carousel.

Parameters:
  `ev <Event>` The event that is being handled.

#### _loadItems

`protected void _loadItems ( )`
The load the required set of items that are needed for display.

#### _numVisibleSetter

`protected Number _numVisibleSetter ( val )`
Set the value for the number of visible items in the Carousel.

Parameters:
  `val <Number>` The new value for numVisible

Returns: `Number`
  The new value that would be set

#### _pagerChangeHandler

`protected void _pagerChangeHandler ( ev )`
The "onchange" handler for select box pagination.

Parameters:
  `ev <Event>` The event object

#### _pagerClickHandler

`protected void _pagerClickHandler ( ev )`
The "click" handler for anchor pagination.

Parameters:
  `ev <Event>` The event object

#### _refreshUi

`protected void _refreshUi ( )`
Refresh the widget UI if it is not already rendered, on first item addition.

#### _selectedItemSetter

`protected Number _selectedItemSetter ( val )`
Set the value for selectedItem.

Parameters:
  `val <Number>` The new value for selectedItem

Returns: `Number`
  The new value that would be set

#### _setCarouselOffset

`protected void _setCarouselOffset ( )`
Set the Carousel offset to the passed offset.

#### _setClipContainerSize

`protected void _setClipContainerSize ( clip , num )`
Set the clip container size (based on the new numVisible value).

Parameters:
  `clip <HTMLElement>` The clip container element.
  `num <Number>` optional The number of items per page.

#### _setContainerSize

`protected void _setContainerSize ( clip , attr )`
Set the container size.

Parameters:
  `clip <HTMLElement>` The clip container element.
  `attr <String>` Either set the height or width.

#### _setFirstVisible

`protected Number _setFirstVisible ( val )`
Set the value for the Carousel's first visible item.

Parameters:
  `val <Number>` The new value for firstVisible

Returns: `Number`
  The new value that would be set

#### _setNavigation

`protected Object _setNavigation ( cfg )`
Set the value for the Carousel's navigation.

Parameters:
  `cfg <Object>` The navigation configuration

Returns: `Object`
  The new value that would be set

#### _setNumItems

`protected Number _setNumItems ( val )`
Set the number of items in the Carousel. Warning: Setting this to a lower number than the current removes items from the end.

Parameters:
  `val <Number>` The new value for numItems

Returns: `Number`
  The new value that would be set

#### _setNumVisible

`protected Number _setNumVisible ( val )`
Clip the container size every time numVisible is set.

Parameters:
  `val <Number>` The new value for numVisible

Returns: `Number`
  The new value that would be set

#### _setOrientation

`protected Boolean _setOrientation ( val )`
Set the orientation of the Carousel.

Parameters:
  `val <Boolean>` The new value for isVertical

Returns: `Boolean`
  The new value that would be set

#### _setRevealAmount

`protected Number _setRevealAmount ( val )`
Set the value for the reveal amount percentage in the Carousel.

Parameters:
  `val <Number>` The new value for revealAmount

Returns: `Number`
  The new value that would be set

#### _setSelectedItem

`protected void _setSelectedItem ( val )`
Set the value for the selected item.

Parameters:
  `val <Number>` The new value for "selected" item

#### _setupCarouselNavigation

`protected void _setupCarouselNavigation ( )`
Setup/Create the Carousel navigation element (if needed).

#### _syncUiForItemAdd

`protected void _syncUiForItemAdd ( )`
Synchronize and redraw the UI after an item is added.

#### _syncUiForItemRemove

`protected void _syncUiForItemRemove ( )`
Synchronize and redraw the UI after an item is removed.

#### _syncUiForItemReplace

`protected void _syncUiForItemReplace ( )`
Synchronize and redraw the UI after an item is replaced.

#### _syncUiForLazyLoading

`protected void _syncUiForLazyLoading ( )`
Synchronize the items table for lazy loading.

#### _syncUiItems

`protected void _syncUiItems ( )`
Redraw the UI for item positioning.

#### _updateNavButtons

`protected void _updateNavButtons ( el , setFocus )`
Set the correct class for the navigation buttons.

Parameters:
  `el <Object>` The target button
  `setFocus <Boolean>` True to set focus ring, false otherwise.

#### _updatePagerButtons

`protected void _updatePagerButtons ( )`
Update the UI for the pager buttons based on the current page and the number of pages.

#### _updatePagerMenu

`protected void _updatePagerMenu ( )`
Update the UI for the pager menu based on the current page and the number of pages. If the number of pages is greater than MAX_PAGER_BUTTONS, then the selection of pages is provided by a drop down menu instead of a set of buttons.

#### _updateTabIndex

`protected void _updateTabIndex ( el )`
Set the correct tab index for the Carousel items.

Parameters:
  `el <Object>` The element to be focussed

#### _validateAnimation

`protected Boolean _validateAnimation ( cfg )`
Validate animation parameters.

Parameters:
  `cfg <Object>` The animation configuration

Returns: `Boolean`
  The status of the validation

#### _validateFirstVisible

`protected Boolean _validateFirstVisible ( val )`
Validate the firstVisible value.

Parameters:
  `val <Number>` The first visible value

Returns: `Boolean`
  The status of the validation

#### _validateNavigation

`protected Boolean _validateNavigation ( cfg )`
Validate and navigation parameters.

Parameters:
  `cfg <Object>` The navigation configuration

Returns: `Boolean`
  The status of the validation

#### _validateNumItems

`protected Boolean _validateNumItems ( val )`
Validate the numItems value.

Parameters:
  `val <Number>` The numItems value

Returns: `Boolean`
  The status of the validation

#### _validateNumVisible

`protected Boolean _validateNumVisible ( val )`
Validate the numVisible value.

Parameters:
  `val <Number>` The numVisible value

Returns: `Boolean`
  The status of the validation

#### _validateRevealAmount

`protected Boolean _validateRevealAmount ( val )`
Validate the revealAmount value.

Parameters:
  `val <Number>` The revealAmount value

Returns: `Boolean`
  The status of the validation

#### _validateScrollIncrement

`protected Boolean _validateScrollIncrement ( val )`
Validate the scrollIncrement value.

Parameters:
  `val <Number>` The scrollIncrement value

Returns: `Boolean`
  The status of the validation

#### addItem

`Boolean addItem ( item , index )`
Insert or append an item to the Carousel. E.g. if Object: ({content:"Your Content", id:"", className:""}, index)

Parameters:
  `item <HTML | Object | HTMLElement>` The item to be appended to the Carousel. If the parameter is a string, it is assumed to be the HTML content of the newly created item. If the parameter is an object, it is assumed to supply the content and an optional class and an optional id of the newly created item.
  `index <Number>` optional The position to where in the list (starts from zero).

Returns: `Boolean`
  Return true on success, false otherwise

#### addItems

`Boolean addItems ( items )`
Insert or append multiple items to the Carousel.

Parameters:
  `items <Array} An array containing an array of new items each linked to the index where the insertion should take place. E.g. [[{content:''}, index1], [{content:''>` , index2]] NOTE: An item at index must already exist.

Returns: `Boolean`
  Return true on success, false otherwise

#### blur

`void blur ( )`
Remove focus from the Carousel.

#### clearItems

`void clearItems ( )`
Clears the items from Carousel.

#### createCarousel

`protected void createCarousel ( elId )`
Create the Carousel.

Parameters:
  `elId <String>` The id of the element to be created

#### createCarouselClip

`protected void createCarouselClip ( )`
Create the Carousel clip container.

#### createCarouselItem

`protected void createCarouselItem ( obj )`
Create the Carousel item.

Parameters:
  `obj <Object>` The attributes of the element to be created

#### createElement

`private void createElement ( el , attrs )`
Create an element, set its class name and optionally install the element to its parent.

Parameters:
  `el <String>` The element to be created
  `attrs <Object>` Configuration of parent, class and id attributes. If the content is specified, it is inserted after creation of the element. The content can also be an HTML element in which case it would be appended as a child node of the created element.

#### focus

`void focus ( )`
Set focus on the Carousel.

#### getById

`static void getById ( )`
Return the appropriate Carousel object based on the id associated with the Carousel element or false if none match.

#### getCarouselItemPosition

`private void getCarouselItemPosition ( position )`
Compute and return the position of a Carousel item based on its position.

Parameters:
  `position <Number>` The position of the Carousel item.

#### getCarouselItemSize

`private void getCarouselItemSize ( which )`
Compute and return the height or width of a single Carousel item depending upon the orientation.

Parameters:
  `which <String>` "height" or "width" to be returned. If this is passed explicitly, the calculated size is not cached.

#### getDimensions

`private void getDimensions ( el , which )`
Get full dimensions of an element.

Parameters:
  `el <Object>` The element to get the dimensions of
  `which <String>` Get the height or width of an element

#### getElementForItem

`Element getElementForItem ( index )`
Return the carouselItemEl at index or null if the index is not found.

Parameters:
  `index <Number>` The index of the item to be returned

Returns: `Element`
  Return the item at index or null if not found

#### getElementForItems

`Array getElementForItems ( )`
Return the carouselItemEl for all items in the Carousel.

Returns: `Array`
  Return all the items

#### getFirstVisibleForPosition

`private void getFirstVisibleForPosition ( pos )`
Return the index of the first item in the view port for displaying item in "pos".

Parameters:
  `pos <Number>` The position of the item to be displayed

#### getFirstVisibleOnpage

`Number getFirstVisibleOnpage ( page )`
Get the first visible item's index on any given page.

Parameters:
  `page <Number>` Page

Returns: `Number`
  First item's index

#### getItem

`Object getItem ( index )`
Return the item at index or null if the index is not found.

Parameters:
  `index <Number>` The index of the item to be returned

Returns: `Object`
  Return the item at index or null if not found

#### getItemPositionById

`void getItemPositionById ( index )`
Return the position of the Carousel item that has the id "id", or -1 if the id is not found.

Parameters:
  `index <Number>` The index of the item to be returned

#### getItems

`Array getItems ( )`
Return all items as an array.

Returns: `Array`
  Return all items in the Carousel

#### getLoadingItems

`Array getLoadingItems ( )`
Return all loading items as an array.

Returns: `Array`
  Return all items that are loading in the Carousel.

#### getPageForItem

`Number getPageForItem ( index )`
Get the page an item is on within carousel.

Parameters:
  `index <Number>` Index of item

Returns: `Number`
  Page item is on

#### getRevealSize

`private void getRevealSize ( )`
Return the size of a part of the item (reveal).

#### getScrollOffset

`private void getScrollOffset ( delta )`
Return the scrolling offset size given the number of elements to scroll.

Parameters:
  `delta <Number>` The delta number of elements to scroll by.

#### getStyle

`private void getStyle ( el , style , type )`
Get the computed style of an element.

Parameters:
  `el <HTMLElement>` The element for which the style needs to be returned.
  `style <String>` The style attribute
  `type <String>` "int", "float", etc. (defaults to int)

#### getVisibleItems

`Array getVisibleItems ( )`
Return all visible items as an array.

Returns: `Array`
  The array of visible items

#### hide

`void hide ( )`
Hide the Carousel.

#### init

`void init ( el , attrs )`
Initialize the Carousel.

Parameters:
  `el <HTMLElement | String>` The html element that represents the Carousel container.
  `attrs <Object>` The set of configuration attributes for creating the Carousel.

#### initAttributes

`void initAttributes ( attrs )`
Initialize the configuration attributes used to create the Carousel.

Parameters:
  `attrs <Object>` The set of configuration attributes for creating the Carousel.

#### initEvents

`void initEvents ( )`
Initialize and bind the event handlers.

#### isAnimating

`Boolean isAnimating ( )`
Return true if the Carousel is still animating, or false otherwise.

Returns: `Boolean`
  Return true if animation is still in progress, or false otherwise.

#### isAutoPlayOn

`Boolean isAutoPlayOn ( )`
Return true if the auto-scrolling of Carousel is "on", or false otherwise.

Returns: `Boolean`
  Return true if autoPlay is "on", or false otherwise.

#### parseCarousel

`protected Boolean parseCarousel ( parent )`
Find the Carousel within a container. The Carousel is identified by the first element that matches the carousel element tag or the element that has the Carousel class.

Parameters:
  `parent <HTMLElement>` The parent element to look under

Returns: `Boolean`
  True if Carousel is found, false otherwise

#### parseCarouselItems

`protected void parseCarouselItems ( )`
Find the items within the Carousel and add them to the items table. A Carousel item is identified by elements that matches the carousel item element tag.

#### parseCarouselNavigation

`protected Boolean parseCarouselNavigation ( parent )`
Find the Carousel navigation within a container. The navigation elements need to match the carousel navigation class names.

Parameters:
  `parent <HTMLElement>` The parent element to look under

Returns: `Boolean`
  True if at least one is found, false otherwise

#### registerPagination

`void registerPagination ( template )`
Register carousels pagination template, append to interface, and populate.

Parameters:
  `template <String>` Pagination template as passed to lang.substitute

#### removeItem

`Boolean removeItem ( index )`
Remove an item at index from the Carousel.

Parameters:
  `index <Number>` The position to where in the list (starts from zero).

Returns: `Boolean`
  Return true on success, false otherwise

#### render

`Boolean render ( appendTo )`
Render the Carousel.

Parameters:
  `appendTo <HTMLElement | String>` The element to which the Carousel should be appended prior to rendering.

Returns: `Boolean`
  Status of the operation

#### replaceItem

`Boolean replaceItem ( item , index )`
Replace an item at index witin Carousel.

Parameters:
  `item <HTML | Object | HTMLElement>` The item to be appended to the Carousel. If the parameter is a string, it is assumed to be the HTML content of the newly created item. If the parameter is an object, it is assumed to supply the content and an optional class and an optional id of the newly created item.
  `index <Number>` The position to where in the list (starts from zero).

Returns: `Boolean`
  Return true on success, false otherwise

#### replaceItems

`Boolean replaceItems ( items )`
Replace multiple items at specified indexes. NOTE: item at index must already exist.

Parameters:
  `items <Array} An array containing an array of replacement items each linked to the index where the substitution should take place. E.g. [[{content:''}, index1], [{content:''>` , index2]]

Returns: `Boolean`
  Return true on success, false otherwise

#### scrollBackward

`void scrollBackward ( )`
Scroll the Carousel by an item backward.

#### scrollForward

`void scrollForward ( )`
Scroll the Carousel by an item forward.

#### scrollPageBackward

`private void scrollPageBackward ( ev , obj )`
Scroll the Carousel by a page backward.

Parameters:
  `ev <Event>` The event object
  `obj <Object>` The context object

#### scrollPageForward

`private void scrollPageForward ( ev , obj )`
Scroll the Carousel by a page forward.

Parameters:
  `ev <Event>` The event object
  `obj <Object>` The context object

#### scrollTo

`void scrollTo ( item , dontSelect )`
Scroll the Carousel to make the item the first visible item.

Parameters:
  `item <object>` Number The index of the element to position at.
  `dontSelect <object>` Boolean True if select should be avoided

#### selectNextItem

`void selectNextItem ( )`
Select the next item in the Carousel.

#### selectPreviousItem

`void selectPreviousItem ( )`
Select the previous item in the Carousel.

#### setItemSelection

`private void setItemSelection ( newpos , oldpos )`
Set the selected item.

Parameters:
  `newpos <Number>` The index of the new position
  `oldpos <Number>` The index of the previous position

#### setStyles

`private void setStyles ( el , style )`
Set multiple styles on one element.

Parameters:
  `el <HTMLElement>` The element to set styles on
  `style <Object>` top:"10px", left:"0px", etc.

#### show

`void show ( )`
Display the Carousel.

#### showNavigation

`private void showNavigation ( )`
Show or hide navigation.

#### startAutoPlay

`void startAutoPlay ( )`
Start auto-playing the Carousel.

#### stopAutoPlay

`void stopAutoPlay ( )`
Stop auto-playing the Carousel.

#### syncNavigation

`private void syncNavigation ( )`
Fire custom events for enabling/disabling navigation elements.

#### syncPagerUi

`private void syncPagerUi ( )`
Synchronize and redraw the Pager UI if necessary.

#### syncUi

`private void syncUi ( o )`
Handle UI update. Call the appropriate methods on events fired when an item is added, or removed for synchronizing the DOM.

Parameters:
  `o <Object>` The item that needs to be added or removed

#### toString

`String toString ( )`
Return the string representation of the Carousel.

#### updatePagination

`void updatePagination ( )`
Update interface's pagination data within a registered template.

#### updateStateAfterScroll

`private void updateStateAfterScroll ( item , sentinel )`
Update the state variables after scrolling the Carousel view port.

Parameters:
  `item <Integer>` The index to which the Carousel has scrolled to.
  `sentinel <Integer>` The last element in the view port.

#### Methods inherited from YAHOO.util.Element:

`_setHTMLAttrConfig, addClass, addListener, appendChild, appendTo, delegate, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeDelegate, removeListener, replaceChild, replaceClass, setStyle, subscribe`

#### Methods inherited from YAHOO.util.AttributeProvider:

`configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes`

#### Methods inherited from YAHOO.util.EventProvider:

`createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll`

### Events

#### afterScroll

`afterScroll ( )`
Fires when the Carousel has scrolled to the previous or next page. Passes back the index of the first and last visible items in the Carousel. See Element.addListener for more information on listening for this event.

#### allItemsRemovedEvent

`allItemsRemovedEvent ( )`
Fires when all items have been removed from the Carousel. See Element.addListener for more information on listening for this event.

#### animationChange

`animationChange ( event )`
Fires when the value for the configuration attribute 'animation' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### autoPlayChange

`autoPlayChange ( event )`
Fires when the value for the configuration attribute 'autoPlay' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### autoPlayIntervalChange

`autoPlayIntervalChange ( event )`
Fires when the value for the configuration attribute 'autoPlayInterval' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeAnimationChange

`beforeAnimationChange ( event )`
Fires before the value for the configuration attribute 'animation' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeAutoPlayChange

`beforeAutoPlayChange ( event )`
Fires before the value for the configuration attribute 'autoPlay' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeAutoPlayIntervalChange

`beforeAutoPlayIntervalChange ( event )`
Fires before the value for the configuration attribute 'autoPlayInterval' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeCarouselElChange

`beforeCarouselElChange ( event )`
Fires before the value for the configuration attribute 'carouselEl' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeCarouselItemElChange

`beforeCarouselItemElChange ( event )`
Fires before the value for the configuration attribute 'carouselItemEl' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeCurrentPageChange

`beforeCurrentPageChange ( event )`
Fires before the value for the configuration attribute 'currentPage' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeFirstVisibleChange

`beforeFirstVisibleChange ( event )`
Fires before the value for the configuration attribute 'firstVisible' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeHide

`beforeHide ( )`
Fires before the Carousel is hidden. See Element.addListener for more information on listening for this event.

#### beforeIsCircularChange

`beforeIsCircularChange ( event )`
Fires before the value for the configuration attribute 'isCircular' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeIsVerticalChange

`beforeIsVerticalChange ( event )`
Fires before the value for the configuration attribute 'isVertical' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeLastVisibleChange

`beforeLastVisibleChange ( event )`
Fires before the value for the configuration attribute 'lastVisible' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeNavigationChange

`beforeNavigationChange ( event )`
Fires before the value for the configuration attribute 'navigation' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeNumItemsChange

`beforeNumItemsChange ( event )`
Fires before the value for the configuration attribute 'numItems' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeNumPagesChange

`beforeNumPagesChange ( event )`
Fires before the value for the configuration attribute 'numPages' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeNumVisibleChange

`beforeNumVisibleChange ( event )`
Fires before the value for the configuration attribute 'numVisible' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforePageChange

`beforePageChange ( )`
Fires when the Carousel is about to scroll to the previous or next page. Passes back the page number of the current page. Note that the first page number is zero. See Element.addListener for more information on listening for this event.

#### beforeRevealAmountChange

`beforeRevealAmountChange ( event )`
Fires before the value for the configuration attribute 'revealAmount' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeScroll

`beforeScroll ( )`
Fires when the Carousel is about to scroll to the previous or next page. Passes back the index of the first and last visible items in the Carousel and the direction (backward/forward) of the scroll. See Element.addListener for more information on listening for this event.

#### beforeScrollIncrementChange

`beforeScrollIncrementChange ( event )`
Fires before the value for the configuration attribute 'scrollIncrement' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeSelectedItemChange

`beforeSelectedItemChange ( event )`
Fires before the value for the configuration attribute 'selectedItem' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeSelectOnScrollChange

`beforeSelectOnScrollChange ( event )`
Fires before the value for the configuration attribute 'selectOnScroll' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeShow

`beforeShow ( )`
Fires when the Carousel is about to be shown. See Element.addListener for more information on listening for this event.

#### blur

`blur ( )`
Fires when the Carousel loses focus. See Element.addListener for more information on listening for this event.

#### carouselElChange

`carouselElChange ( event )`
Fires when the value for the configuration attribute 'carouselEl' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### carouselItemElChange

`carouselItemElChange ( event )`
Fires when the value for the configuration attribute 'carouselItemEl' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### currentPageChange

`currentPageChange ( event )`
Fires when the value for the configuration attribute 'currentPage' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### firstVisibleChange

`firstVisibleChange ( event )`
Fires when the value for the configuration attribute 'firstVisible' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### focus

`focus ( )`
Fires when the Carousel gains focus. See Element.addListener for more information on listening for this event.

#### hide

`hide ( )`
Fires when the Carousel is hidden. See Element.addListener for more information on listening for this event.

#### isCircularChange

`isCircularChange ( event )`
Fires when the value for the configuration attribute 'isCircular' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### isVerticalChange

`isVerticalChange ( event )`
Fires when the value for the configuration attribute 'isVertical' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### itemAdded

`itemAdded ( )`
Fires when an item has been added to the Carousel. Passes back the content of the item that would be added, the index at which the item would be added, and the event itself. See Element.addListener for more information on listening for this event.

#### itemRemoved

`itemRemoved ( )`
Fires when an item has been removed from the Carousel. Passes back the content of the item that would be removed, the index from which the item would be removed, and the event itself. See Element.addListener for more information on listening for this event.

#### itemReplaced

`itemReplaced ( )`
Fires when an item has been replaced in the Carousel. Passes back the content of the item that was replaced, the content of the new item, the index where the replacement occurred, and the event itself. See Element.addListener for more information on listening for this event.

#### itemSelected

`itemSelected ( )`
Fires when an item has been selected in the Carousel. Passes back the index of the selected item in the Carousel. Note, that the index begins from zero. See Element.addListener for more information on listening for this event.

#### lastVisibleChange

`lastVisibleChange ( event )`
Fires when the value for the configuration attribute 'lastVisible' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### loadItems

`loadItems ( )`
Fires when the Carousel needs more items to be loaded for displaying them. Passes back the first and last visible items in the Carousel, and the number of items needed to be loaded. See Element.addListener for more information on listening for this event.

#### navigationChange

`navigationChange ( event )`
Fires when the value for the configuration attribute 'navigation' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### navigationStateChange

`navigationStateChange ( )`
Fires when the state of either one of the navigation buttons are changed from enabled to disabled or vice versa. Passes back the state (true/false) of the previous and next buttons. The value true signifies the button is enabled, false signifies disabled. See Element.addListener for more information on listening for this event.

#### numItemsChange

`numItemsChange ( event )`
Fires when the value for the configuration attribute 'numItems' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### numPagesChange

`numPagesChange ( event )`
Fires when the value for the configuration attribute 'numPages' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### numVisibleChange

`numVisibleChange ( event )`
Fires when the value for the configuration attribute 'numVisible' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### pageChange

`pageChange ( )`
Fires after the Carousel has scrolled to the previous or next page. Passes back the page number of the current page. Note that the first page number is zero. See Element.addListener for more information on listening for this event.

#### revealAmountChange

`revealAmountChange ( event )`
Fires when the value for the configuration attribute 'revealAmount' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### scrollIncrementChange

`scrollIncrementChange ( event )`
Fires when the value for the configuration attribute 'scrollIncrement' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### selectedItemChange

`selectedItemChange ( event )`
Fires when the value for the configuration attribute 'selectedItem' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### selectOnScrollChange

`selectOnScrollChange ( event )`
Fires when the value for the configuration attribute 'selectOnScroll' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### show

`show ( )`
Fires when the Carousel is shown. See Element.addListener for more information on listening for this event.

#### startAutoPlay

`startAutoPlay ( )`
Fires when the auto play has started in the Carousel. See Element.addListener for more information on listening for this event.

#### stopAutoPlay

`stopAutoPlay ( )`
Fires when the auto play has been stopped in the Carousel. See Element.addListener for more information on listening for this event.

#### Events inherited from YAHOO.util.Element:

`appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,`

### Configuration Attributes

#### animation `- Object`

The optional animation attributes for the Carousel.
Default Value:
{ speed: 0, // the animation speed (in seconds)
effect: null } // the animation effect (like YAHOO.util.Easing.easeOut)

#### autoPlay `- Number`

Set this to time in milli-seconds to have the Carousel automatically scroll the contents.
Deprecated Use autoPlayInterval instead.

#### autoPlayInterval `- Number`

The delay in milli-seconds for scrolling the Carousel during auto-play. Note: The startAutoPlay() method needs to be invoked to trigger automatic scrolling of Carousel.

#### carouselEl `- Boolean`

The type of the Carousel element.
Default Value: OL

#### carouselItemEl `- Boolean`

The type of the list of items within the Carousel.
Default Value: LI

#### currentPage `- Number`

The current page number (read-only.)

#### firstVisible `- Number`

The index to start the Carousel from (indexes begin from zero)
Default Value: 0

#### isCircular `- Boolean`

Set this to true to wrap scrolling of the contents in the Carousel.
Default Value: false

#### isVertical `- Boolean`

True if the orientation of the Carousel is vertical
Default Value: false

#### lastVisible `- Number`

The last item visible in the carousel.

#### navigation `- Object`

The set of navigation controls for Carousel
Default Value:
{ prev: null, // the previous navigation element
next: null } // the next navigation element

#### numItems `- Number`

The number of items in the Carousel.

#### numPages `- Number`

The number of pages in the carousel.

#### numVisible `- Number`

The number of visible items in the Carousel's viewport.
Default Value: 3

#### revealAmount `- Number`

The percentage of the item to be revealed on each side of the Carousel (before and after the first and last item in the Carousel's viewport.)
Default Value: 0

#### scrollIncrement `- Number`

The number of items to scroll by for arrow keys.
Default Value: 1

#### selectedItem `- Number`

The index of the selected item.

#### selectOnScroll `- Boolean`

Set this to true to automatically set focus to follow scrolling in the Carousel.
Default Value: true

#### Configuration attributes inherited from YAHOO.util.Element:

`element`

Copyright © 2011 Yahoo! Inc. All rights reserved.