Carousel Class

Component used to render two or more panels in a horizonal layout. Users can cycle through the panels using the back() and next() functions. The carousel can store a fixed set of panels or you can create the illusion of having infinite panels by updating panels when they are out of view.

Constructors

Carousel( parent, config )
Used to instantiate this class
parentDOM element in which to render this component
configConfiguration settings (optional). See config options for more information.

Config Options

animate
If true, will animate transitions when calling the back() and next() functions.
animationSteps
Time to transition between panels, in milliseconds. Only applicable when "animate" is set to true.
transitionEffect
Transition effect. Only applicable when "animate" is set to true and an "fx" config is given. See the javaxt.dhtml.Effects class for a list of options.
fx
An instance of a javaxt.dhtml.Effects class used to animate transitions. Only used when "animate" is set to true.
loop
By default, a user cannot go past the last panel in the carousel when calling next() or past the first panel when calling back(). However, when "loop" is set to true, users can go past the first/last panels by cloning the "next" or "previous" panel and appending it to the carousel so you can cycle through elements.
slideOver
If true, will move the next panel over the current panel during transitions. Only applicable when "animate" is set to true.
drag
If true, will allow touchscreen users to slide back and forth through the panels using touch gestures.
visiblePanels
Currently unused
padding
Amount of padding between panels, in pixels.

Events

onRender( )
Called after the carousel has been added to the DOM
onResize( )
Called after the carousel has been resized
onChange( currPanel, prevPanel )
Called after the carousel switches panels
currPanelContent of the active panel
prevPanelContent of the previously active panel
beforeChange( currPanel, nextPanel )
Called before the carousel switches panels.
currPanelContent of the active panel
nextPanel

Public Methods

destroy( )
Used to destroy the carousel and remove it from the DOM
add( el )
Used to add a panel to the carousel
clear( )
Used to remove all the panels from the carousel
resize( )
next( )
Used to make the next panel visible. In a horizontal configuration, the active panel will slide left.
back( )
Used to make the previous panel visible. In a horizontal configuration, the active panel will slide right.
getPanels( )
Returns an array with information for each panel in the carousel. Each element in the array contains the following information:
  • div: DOM element associated with the panel
  • isVisible: Used to indicate whether the panel is intersects the parent container
  • visibleArea: Total area that the panel covers in the parent container
enableAnimation( )
Used to enable animations when transitioning between panels
disableAnimation( )
Used to disable animations when transitioning between panels