Yahoo! UI Library

Carousel Widget  2.8.0r4

Yahoo! UI Library > carousel > YAHOO.widget.Carousel
Search:
 
Filters

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_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 - object

The content to be used as the progress indicator when the item is still being loaded.
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 - object

The next navigation button name/text.
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 - object

The prefix text for the pager in case the UI is a drop-down.
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 - object

The previous navigation button name/text.
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"

WidgetName - private static object

The widget name.

Properties inherited from YAHOO.util.Element:

DOM_EVENTS

Properties inherited from YAHOO.util.AttributeProvider:

_configs

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.
Returns: void

_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
Returns: void

_autoScroll

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

_getLastVisible

protected void _getLastVisible ( )
Get the index of the last visible item
Returns: void

_getNumPages

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

_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
Returns: void

_keyboardEventHandler

protected void _keyboardEventHandler ( ev )
The keyboard event handler for Carousel.
Parameters:
ev <Event> The event that is being handled.
Returns: void

_loadItems

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

_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
Returns: void

_pagerClickHandler

protected void _pagerClickHandler ( ev )
The "click" handler for anchor pagination.
Parameters:
ev <Event> The event object
Returns: void

_refreshUi

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

_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.
Returns: void

_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.
Returns: void

_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.
Returns: void

_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
Returns: void

_setupCarouselNavigation

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

_syncUiForItemAdd

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

_syncUiForItemReplace

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

_syncUiForLazyLoading

protected void _syncUiForLazyLoading ( )
Synchronize and redraw the UI for lazy loading.
Returns: void

_syncUiItems

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

_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.
Returns: void

_updatePagerButtons

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

_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.
Returns: void

_updateTabIndex

protected void _updateTabIndex ( el )
Set the correct tab index for the Carousel items.
Parameters:
el <Object> The element to be focussed
Returns: void

_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 <String | Object | HTMLElement> The item to be appended to the Carousel. If the parameter is a string, it is assumed to be the 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.
Returns: void

clearItems

void clearItems ( )
Clears the items from Carousel.
Returns: void

createCarousel

protected void createCarousel ( elId )
Create the Carousel.
Parameters:
elId <String> The id of the element to be created
Returns: void

createCarouselClip

protected void createCarouselClip ( )
Create the Carousel clip container.
Returns: void

createCarouselItem

protected void createCarouselItem ( obj )
Create the Carousel item.
Parameters:
obj <Object> The attributes of the element to be created
Returns: void

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.
Returns: void

focus

void focus ( )
Set focus on the Carousel.
Returns: void

getById

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

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.
Returns: void

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.
Returns: void

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
Returns: void

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
Returns: void

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
Returns: void

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).
Returns: void

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.
Returns: void

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)
Returns: void

getVisibleItems

Array getVisibleItems ( )
Return all visible items as an array.
Returns: Array
The array of visible items

hide

void hide ( )
Hide the Carousel.
Returns: void

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.
Returns: void

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.
Returns: void

initEvents

void initEvents ( )
Initialize and bind the event handlers.
Returns: void

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.
Returns: void

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
Returns: void

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 <String | Object | HTMLElement> The item to be appended to the Carousel. If the parameter is a string, it is assumed to be the 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.
Returns: void

scrollForward

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

scrollPageBackward

private void scrollPageBackward ( ev , obj )
Scroll the Carousel by a page backward.
Parameters:
ev <Event> The event object
obj <Object> The context object
Returns: void

scrollPageForward

private void scrollPageForward ( ev , obj )
Scroll the Carousel by a page forward.
Parameters:
ev <Event> The event object
obj <Object> The context object
Returns: void

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
Returns: void

selectNextItem

void selectNextItem ( )
Select the next item in the Carousel.
Returns: void

selectPreviousItem

void selectPreviousItem ( )
Select the previous item in the Carousel.
Returns: void

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
Returns: void

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.
Returns: void

show

void show ( )
Display the Carousel.
Returns: void

startAutoPlay

void startAutoPlay ( )
Start auto-playing the Carousel.
Returns: void

stopAutoPlay

void stopAutoPlay ( )
Stop auto-playing the Carousel.
Returns: void

syncNavigation

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

syncPagerUi

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

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
Returns: void

toString

String toString ( )
Return the string representation of the Carousel.
Returns: String

updatePagination

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

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.
Returns: void

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.

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,

Files

Methods

Copyright © 2009 Yahoo! Inc. All rights reserved.