WaltzerJS has a range of configurable options to define how the plugin will function when initialised. In addition there is also a number of methods and events that can be used to develop the plugin (and its functionality) further.
Markup & Styling
Markup structure is relatively straight forward. Carousel items need to be nested inside the targeted container. WaltzerJS will create any navigation or pagers elements after the plugin call.
<div id="carousel"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
Keep in mind WaltzerJS core styling may be affected by any custom CSS included. Refer to the examples if you encounter any styling based functionality issues.
Time to complete each transition.
Number of items to scroll during each transition.
Turn on auto scrolling. Carousel will transition automatically.
Pause time between each automatic transition, when auto scrolling is enabled.
Easing effect to be applied during carousel transitions. By default jQuery only has two options built in “swing” and “linear”. Further options are available through use of easing plugins such as jQuery Easing or jQueryUI.
Item to start on, items will be reordered positioning the specified item first. 0 based indexing e.g first item is equal to 0.
Transition top to bottom, instead of left to right.
Behavior of the carousel when the last item is reached. circular will behave as though items are in a continuous loop e.g. last item appears as the previous item to the first. non-circular will behave like a linear row, with the carousel having to transition back to the start along the path it came.
Whether or not to create navigation buttons.
Class name for the ‘previous’ button to be created.
Class name for the ‘next’ button to be created.
Whether or not to create a navigation pager.
Callback on carousel creation.
Callback on transition complete.
Callback on forward transition complete.
Callback on backward transition complete.
Logs the WaltzerJS instance as an object to the developer console. Contains various configuration information about a specified carousel.
WaltzerJS has a number of methods that can be used to control the behavior of a carousel after the instance has been created.
Turn on auto scrolling.
Turn off auto scrolling.
Move carousel forward.
Move the carousel backward.
Removes all carousel functionality, returns the element back to its pre-waltzer state.
In addition to providing the ability to pass event callbacks, WaltzerJS also triggers a number of events during and after certain carousel actions. Event listeners can be set up to target these using jQuery’s on() function.
This event is triggered as the carousel moves forward.
This event is triggered as the carousel moves backward.
This event is triggered after the carousel moves forward.
This event is triggered after the carousel moves backward.
This event is triggered as the carousel moves (in either direction).
This event is triggered after the carousel moves (in either direction).