Show:

A base class for Carousel.

Check the live demo.

Constructor

A.Carousel

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Example:

<div id="myCarousel">
                                     <div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/1.jpg);"></div>
                                     <div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div>
                                     <div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div>
                                     <div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div>
                                    </div>
                                    
YUI().use(
                                     'aui-carousel',
                                     function(Y) {
                                       new Y.Carousel(
                                         {
                                           contentBox: '#myCarousel',
                                           height: 250,
                                           width: 700
                                         }
                                       ).render();
                                     }
                                    );
                                    

Methods

_afterAttachSwipeEvents

() protected

Attaches more events related to the swipe functionality.

_afterCurrentIndexChange

(
  • event
)
protected

Fired after the currentIndex attribute is set.

Parameters:

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

_afterPreloadAllImagesChange

() protected

Fired after the preloadAllImages attribute is changed.

_afterResponsive

(
  • event
)
protected

Fired after the responsive event.

Parameters:

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

Object:

An object with the original dimensions

_canChangeHeight

() Boolean

Checks if the height can be manually changed.

Returns:

Boolean:

_canChangeWidth

() Boolean

Checks if the width can be manually changed.

Returns:

Boolean:

_defAnimateFn

() protected

Default behavior for animating the current image in the viewer.

_defResponsiveFn

(
  • event
)
protected

Default behavior for the responsive event. It updates the dimensions of the widget so it will respect the preserveRatio, maxHeight and maxWidth attributes.

Parameters:

_getCurrentImage

() Node protected

Gets the current image node.

Returns:

Node:

_getCurrentImageContainer

() protected

Returns the container node for the current image.

_getImageContainerAtIndex

(
  • index
)
protected

Returns the container node at the requested index.

Parameters:

_handleResponsive

() protected

Fires the responsive event.

_isMouseInsideMenu

(
  • event
)
Boolean

Checks if the mouse is inside the menu region.

Parameters:

Returns:

Boolean:

_loadImage

(
  • index
)
protected

Fires the necessary events to load the requested image.

Parameters:

  • index Number

    The index of the image to load.

_onAnimate

(
  • event
)
protected

Fired on the animate event. This prevents new image animations when the current image was shown by scrolling.

Parameters:

_onCarouselEnter

(
  • event
)
protected

Fired when the mouse enters the carousel. If it has also entered the menu the slideshow will be resumed.

Parameters:

_onCarouselLeave

() protected

Fired when the mouse leaves the carousel, which will resume the slideshow.

_onClickControl

(
  • event
)
protected

Fired when one of the carousel's controls is clicked.

Parameters:

  • event Object

_onCurrentImageReady

() protected

This should be called when the current image is ready to be displayed.

_onImageLoad

() protected

Fired when an image has finished loading.

_onMenuEnter

(
  • event
)
protected

Fired when the mouse enters the menu. If it's coming from the carousel the slideshow will be resumed.

Parameters:

_onMenuLeave

(
  • event
)
protected

Fired when the mouse leaves the menu. If it's going to the carousel the slideshow will be paused.

Parameters:

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

_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
)
protected

Renders the requested image and registers it to be loaded when used.

Parameters:

  • index Number

    The index of the image to be loaded.

  • container Node

    The container where the image should be added.

_renderImageContainers

() Array protected

Renders all image containers and returns them in an array.

Returns:

Array:

list of image containers

_renderImageListNode

() Node protected

Renders the image list node inside the image viewer.

Returns:

Node:

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.

_setCurrentIndex

(
  • val
)
protected

Sets currentIndex attribute.

Parameters:

_setImageAnim

(
  • val
)
protected

Sets imageAnim attribute.

Parameters:

  • val Object

_setNodeMenu

(
  • val
)
protected

Set the nodeMenu attribute.

Parameters:

  • val Object

_showCurrentImage

() protected

Shows the current image in the viewer.

_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
)
Boolean protected

Validates the given value for the nodeMenuPosition attribute.

Parameters:

  • val String

    The value to be validated

Returns:

Boolean:

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:

Boolean:

hasPrev

() Boolean

Checks if there is a previous element to navigate.

Returns:

Boolean:

initializer

() protected

Construction logic executed during instantiation. Lifecycle.

item

(
  • val
)

Set the currentIndex attribute which activates a certain item on A.Carousel based on its index.

Parameters:

prev

()

Loads the previous image.

renderUI

() protected

Create the DOM structure for the A.ImageViewerBase. 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

circular

Boolean

If the carousel will be circular or not.

Default: true

controlNext

Node

The node for the control that shows the next image.

Default: null

controlPrevious

Node

The node for the control that shows the previous image.

Default: null

currentIndex

Number | String

Index of the current image.

Default: 0

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.

maxHeight

Number

The maximum height of the widget.

Default: Infinity

maxWidth

Number

The maximum width of the widget.

Default: Infinity

nodeMenu

Node | String

Node container of the navigation items.

Default: null

nodeMenuItemSelector

String

CSS selector to match the navigation items.

Default: .carousel-menu-item

nodeMenuPosition

String

Position of the menu.

Default: 'inside'

nodeMenuPosition

String

Position of the menu.

Default: 'outside'

pauseOnHover

Boolean

Determines if A.Carousel will pause on mouse enter or play when mouse leave.

preloadAllImages

Boolean

Preloads all images listed in the sources attribute.

Default: false

preserveRatio

Boolean

Flag to indicate if the width/height ratio should be preserved.

Default: true

showControls

Boolean

Shows the controls.

Default: true

sources

Array

The source links for the images to be shown.

Default: []

Events

animate

Fired when the current image will be animated in.

responsive

Fired when the widget will be updated to be responsive.