A.Carousel Class
alloy-ui/src/aui-carousel/js/aui-carousel.js:35
A base class for Carousel.
Check the live demo.
Constructor
A.Carousel
-
config
Parameters:
-
configObjectObject literal specifying widget configuration properties.
Example:
<div id="myCarousel">
<div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/1.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/2.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/3.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/4.jpg);"></div>
</div>
YUI().use(
'aui-carousel',
function(Y) {
new Y.Carousel(
{
contentBox: '#myCarousel',
height: 250,
width: 700
}
).render();
}
);
Index
Methods
- _afterAttachSwipeEvents
- _afterCurrentIndexChange
- _afterNodeMenuChange
- _afterNodeMenuItemSelectorChange
- _afterNodeMenuPositionChange
- _afterPauseOnHoverChange
- _afterPlayingChange
- _afterPreloadAllImagesChange
- _afterRender
- _afterResponsive
- _afterShowControlsChange
- _afterSourcesChange
- _afterUISetVisible
- _bindControls
- _bindPauseOnHover
- _calculateOriginalDimensions
- _canChangeHeight
- _canChangeWidth
- _defAnimateFn
- _defResponsiveFn
- _getCurrentImage
- _getCurrentImageContainer
- _getImageContainer
- _getImageContainerAtIndex
- _handleResponsive
- _isMouseInsideMenu
- _loadImage
- _onAnimate
- _onCarouselEnter
- _onCarouselLeave
- _onClickControl
- _onCurrentImageReady
- _onImageLoad
- _onKeydown
- _onMenuEnter
- _onMenuLeave
- _onResponsive
- _pauseOnEnter
- _playOnLeave
- _plugFocusManager
- _preloadAll
- _renderControls
- _renderImage
- _renderImageContainers
- _renderImageListNode
- _renderImages
- _renderImagesForFirstTime
- _renderMenu
- _renderPlayer
- _setCurrentIndex
- _setImageAnim
- _setNodeMenu
- _showCurrentImage
- _syncAriaControlsUI
- _syncAriaCurrentImageUI
- _syncAriaMenuUI
- _syncAriaPlayerUI
- _syncControlsUI
- _syncNodeMenuPositionUI
- _syncPlaying
- _updateCurrentImageCSS
- _validateNodeMenuPosition
- bindUI
- destructor
- hasNext
- hasPrev
- initializer
- initializer
- item
- next
- prev
- renderUI
- syncUI
- updateDimensions
- updateDimensionsWithNewRatio
Properties
- ATTRS static
- CSS_PREFIX static
Attributes
Events
Methods
_afterAttachSwipeEvents
()
protected
Attaches more events related to the swipe functionality.
_afterCurrentIndexChange
-
event
Fired after the currentIndex attribute is set.
Parameters:
-
eventEventFacade
_afterNodeMenuChange
()
protected
Fired after nodeMenu attribute changes.
_afterNodeMenuItemSelectorChange
()
protected
Fired after nodeMenuItemSelector attribute changes.
_afterNodeMenuPositionChange
()
protected
Fired after nodeMenuPosition attribute changes.
_afterPauseOnHoverChange
()
protected
Fired after pauseOnHover attribute changes.
_afterPlayingChange
()
protected
Fired after the playing attribute changes.
_afterPreloadAllImagesChange
()
protected
Fired after the preloadAllImages attribute is changed.
_afterResponsive
-
event
Fired after the responsive event.
Parameters:
-
eventEventFacade
_afterShowControlsChange
()
protected
Fired after the showControls attribute is changed.
_afterSourcesChange
()
protected
Fired after the sources attribute is changed.
_afterUISetVisible
()
protected
Fired after the visible attribute is set.
_bindControls
()
protected
Binds the events related to the carousel's controls.
_bindPauseOnHover
()
protected
Binds the events related to the pause on hover behavior.
_calculateOriginalDimensions
()
Object
protected
Calculates the original width and height of the widget, which will be used when changing its dimensions to preserve its ratio.
Returns:
An object with the original dimensions
_canChangeHeight
()
Boolean
Checks if the height can be manually changed.
Returns:
_canChangeWidth
()
Boolean
Checks if the width can be manually changed.
Returns:
_defAnimateFn
()
protected
Default behavior for animating the current image in the viewer.
_defResponsiveFn
-
event
Default behavior for the responsive event. It updates the dimensions of
the widget so it will respect the preserveRatio, maxHeight and maxWidth
attributes.
Parameters:
-
eventEventFacade
_getCurrentImageContainer
()
protected
Returns the container node for the current image.
_getImageContainer
()
protected
Returns the image container node.
_getImageContainerAtIndex
-
index
Returns the container node at the requested index.
Parameters:
-
indexNumber
_handleResponsive
()
protected
Fires the responsive event.
_isMouseInsideMenu
-
event
Checks if the mouse is inside the menu region.
Parameters:
-
eventEventFacade
Returns:
_loadImage
-
index
Fires the necessary events to load the requested image.
Parameters:
-
indexNumberThe index of the image to load.
_onAnimate
-
event
Fired on the animate event. This prevents new image animations when
the current image was shown by scrolling.
Parameters:
-
eventEventFacade
_onCarouselEnter
-
event
Fired when the mouse enters the carousel. If it has also entered the menu the slideshow will be resumed.
Parameters:
-
eventEventFacade
_onCarouselLeave
()
protected
Fired when the mouse leaves the carousel, which will resume the slideshow.
_onClickControl
-
event
Fired when one of the carousel's controls is clicked.
Parameters:
-
eventObject
_onCurrentImageReady
()
protected
This should be called when the current image is ready to be displayed.
_onImageLoad
()
protected
Fired when an image has finished loading.
_onKeydown
-
event
Fired when the user presses a key on the keyboard.
Parameters:
-
eventEventFacade
_onMenuEnter
-
event
Fired when the mouse enters the menu. If it's coming from the carousel the slideshow will be resumed.
Parameters:
-
eventEventFacade
_onMenuLeave
-
event
Fired when the mouse leaves the menu. If it's going to the carousel the slideshow will be paused.
Parameters:
-
eventEventFacade
_onResponsive
()
protected
Fired on the responsive event.
_pauseOnEnter
()
protected
Called when the mouse enters the carousel with pauseOnHover set to true. Pauses the slideshow unless it was already paused.
_playOnLeave
()
protected
Called when the mouse leaves the carousel with pauseOnHover set to true. If the slideshow was paused due to entering the carousel before, this will resume it.
_plugFocusManager
()
protected
Setup the Plugin.NodeFocusManager that handles keyboard
navigation.
_preloadAll
()
protected
Preloads all the images if the preloadAllImages attribute is true.
_renderControls
()
protected
Renders the carousel's menu with all its controls.
_renderImage
-
index -
container
Renders the requested image and registers it to be loaded when used.
_renderImageContainers
()
Array
protected
Renders all image containers and returns them in an array.
Returns:
list of image containers
_renderImageListNode
()
Node
protected
Renders the image list node inside the image viewer.
Returns:
the image list node
_renderImages
()
protected
Renders the images indicated in the sources attribute.
_renderImagesForFirstTime
()
protected
Renders the images indicated in the sources attribute for
the first time. If the images were already present before the widget
is rendered, we'll mark these images as having already been loaded.
_renderMenu
()
protected
Creates the default menu node.
_renderPlayer
()
protected
Overrides the original method for rendering the player button. The button
is already rendered together with the menu by _renderControls, so this is
just storing its reference in the right variable.
_setImageAnim
-
val
Sets imageAnim attribute.
Parameters:
-
valObject
_setNodeMenu
-
val
Set the nodeMenu attribute.
Parameters:
-
valObject
_showCurrentImage
()
protected
Shows the current image in the viewer.
_syncAriaControlsUI
-
activeNode
Updates the aria values for the controls adding selected true and false as necessary.
Parameters:
-
activeNodeNodeThe current active item
_syncAriaCurrentImageUI
()
protected
Update the aria attributes for image.
_syncAriaMenuUI
()
protected
Update the aria attributes for the A.Carousel UI.
_syncAriaPlayerUI
()
protected
Update the aria attributes for the pause/play button.
_syncControlsUI
()
protected
Updates the controls, showing or hiding them as necessary.
_syncNodeMenuPositionUI
()
protected
Updates the UI according to the value of the nodeMenuPosition attribute.
_syncPlaying
()
protected
Updates the player according to the value of the playing attribute.
_updateCurrentImageCSS
()
protected
Sets the CSS class that indicates the current image.
_validateNodeMenuPosition
-
val
Validates the given value for the nodeMenuPosition attribute.
Parameters:
-
valStringThe value to be validated
Returns:
true if the value is valid or false otherwise
bindUI
()
protected
Bind the events on the A.Carousel UI. Lifecycle.
destructor
()
protected
Destructor implementation for the A.Carousel class. Lifecycle.
hasNext
()
Boolean
Checks if there is a next element to navigate.
Returns:
hasPrev
()
Boolean
Checks if there is a previous element to navigate.
Returns:
initializer
()
protected
Construction logic executed during instantiation. Lifecycle.
initializer
()
protected
Construction logic executed during A.Carousel instantiation.
Lifecycle.
item
-
val
Set the currentIndex attribute which
activates a certain item on A.Carousel based on its index.
Parameters:
-
valNumber
next
()
Loads the next image.
prev
()
Loads the previous image.
renderUI
()
protected
Create the DOM structure for the A.Carousel UI. Lifecycle.
syncUI
()
protected
Sync the A.Carousel UI. Lifecycle.
updateDimensions
()
Updates the widget's dimensions so that it will fit the page better.
updateDimensionsWithNewRatio
()
Updates the widget's dimensions like the updateDimensions method, but
also recalculates the ratio to be preserved. Useful if the visible content
of the widget has changed causing the ratio to change as well.
Properties
ATTRS
Object
static
Static property used to define the default attribute
configuration for the A.Carousel.
CSS_PREFIX
String
static
Static property provides a string to identify the CSS prefix.
Attributes
gutter
Array
Vertical and horizontal values in pixels that should not be counted when preserving the widget's ratio. widget.
Default: [0, 0]
imageAnim
Boolean | Object
Configuration attributes passed to the Anim class, or false if there should be no animation.
Default: Predefined [Anim](Anim.html) configuration.
Events
animate
Fired when the current image will be animated in.
responsive
Fired when the widget will be updated to be responsive.