Carousel Class

Show Source

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 )

Show Source

Used to instantiate this class

parent	DOM element in which to render this component
config	Configuration settings (optional). See config options for more information.

Config Options

animate

If true, will animate transitions when calling the back() and next() functions.

Show Source

animationSteps

Time to transition between panels, in milliseconds. Only applicable when "animate" is set to true.

Show Source

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.

Show Source

An instance of a javaxt.dhtml.Effects class used to animate transitions. Only used when "animate" is set to true.

Show Source

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.

Show Source

slideOver

If true, will move the next panel over the current panel during transitions. Only applicable when "animate" is set to true.

Show Source

drag

If true, will allow touchscreen users to slide back and forth through the panels using touch gestures.

Show Source

visiblePanels

Currently unused

Show Source

padding

Amount of padding between panels, in pixels.

Show Source

Events

onRender( )

Called after the carousel has been added to the DOM

Show Source

onResize( )

Called after the carousel has been resized

Show Source

onChange( currPanel, prevPanel )

Called after the carousel switches panels

currPanel	Content of the active panel
prevPanel	Content of the previously active panel

Show Source

beforeChange( currPanel, nextPanel )

Called before the carousel switches panels.

currPanel	Content of the active panel
nextPanel

Show Source

Public Methods

destroy( )

Used to destroy the carousel and remove it from the DOM

Show Source

add( el )

Used to add a panel to the carousel

Show Source

clear( )

Used to remove all the panels from the carousel

Show Source

resize( )

Show Source

next( )

Used to make the next panel visible. In a horizontal configuration, the active panel will slide left.

Show Source

back( )

Used to make the previous panel visible. In a horizontal configuration, the active panel will slide right.

Show Source

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

Show Source

enableAnimation( )

Used to enable animations when transitioning between panels

Show Source

disableAnimation( )

Used to disable animations when transitioning between panels

Show Source