Cl.Carousel¶
This is a list of all relevant options, methods, events and callbacks.
Options¶
Options are set on initializing the carousel:
new Cl.Carousel({
// your options
'index': 0,
'move': 'single'
});
| Option | Default | Description |
|---|---|---|
| index | null | shows selected element[index]/group[index] starting form zero. |
| timeout | null | timeout in ms for autoplay, if 0 or null autoplay is ignored. |
| autoplay | false | continues timeout even after manual cancellation. |
| easing | ‘linear’ | the jquery easing method for all animations. |
| duration | 300 | the jquery duration speed for all animations. |
| move | ‘auto’ | either single to move one element at a time or auto to move all visible elements. |
| momentum | true | enables next and previous to jump to the end or beginning when reaching their bounds. |
| cls | object | the available css class getters and setters. |
Option cls setters and getters:
| Option | Default | Description |
|---|---|---|
| active | ‘active’ | class will be added to the active item. |
| disabled | ‘disabled’ | class will be added to the triggers when bound is reached and momentum is false. |
| wrapper | ‘.wrapper’ | the outer relative positioned wrapper where the height will be added. |
| viewport | ‘.viewport’ | the inner absolute positioned wrapper that will be moved. |
| elements | ‘.item’ | the element / individual items. |
| next | ‘.trigger-next a’ | element which triggers the method next. |
| previous | ‘.trigger-previous a’ | element which triggers the method previous. |
| navigation | ‘.nav a’ | navigation elements which trigger the method move whith their corresponding index. |
Methods¶
Methods can be called using an instance of the class:
var carousel = new Cl.Carousel();
// trigger the instanace
carousel.toggle();
All Methods have appropriate events and callbacks.
- carousel.next()¶
Description: goes to the next carousel slide. Returns: next callback.
- carousel.previous()¶
Description: goes to the previous carousel slide. Returns: previous callback.
- carousel.move(index)¶
Description: moves to a carousel entry.
Arguments: - index (number) – index of the element to be moved to.
Returns: move callback.
- carousel.play()¶
Description: starts the carousel timeout. Returns: play callback.
- carousel.stop()¶
Description: stops the carousel timeout. Returns: stop callback.
- carousel.update()¶
Description: updates the carousels states. Returns: update callback.
- carousel.destroy()¶
Description: removes all states and events. Returns: destroy callback.
Callbacks¶
Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:
var carousel = new Cl.Carousel();
// register callback
carousel.callbacks.move = function (scope) {
console.log('caoursel is moving to position ' + scope.index);
};
Available keywords: