ch.Carousel
Description
A large list of elements. Some elements will be shown in a preset area, and others will be hidden waiting for the user interaction to show it.
How-to
// Create a new carousel.
var carousel = new ch.Carousel(el, [options]);
// Create a new Carousel with disabled effects.
var carousel = new ch.Carousel(el, {
'fx': false
});
// Create a new Carousel with items asynchronously loaded.
var carousel = new ch.Carousel(el, {
'async': 10
}).on('itemsadd', function (collection) {
// Inject content into the added <li> elements
$.each(collection, function (i, e) {
e.innerHTML = 'Content into one of newly inserted <li> elements.';
});
});
Parameters
-
el
- HTMLElement : A HTMLElement to create an instance of ch.Carousel. -
options
- Object : Options to customize an instance.-
async
- Number : Defines the number of future asynchronous items to add to the component. Default: 0. -
arrows
- Boolean : Defines if the arrow-buttons must be created or not at initialization. Default: true. -
pagination
- Boolean : Defines if a pagination must be created or not at initialization. Default: false. -
fx
- Boolean : Enable or disable the slide effect. Default: true. -
autoHeight
- Boolean : Enable or disable the recalculation of item height on a proportional basis maintaining the proportions of an item. Default: true. -
autoMargin
- Boolean : Enable or disable the addition of a proportional margin to each item. Default: true. -
limitPerPage
- Number : Set the maximum amount of items to show in each page.
-
Properties
.Carousel#name
String
The name of the component.
Methods
-
page
- Number : Reference of page where the list has to move.
.constructor()
Returns a reference to the constructor function.
.destroy()
Destroys a Carousel instance.
.disable() → {carousel}
Disables a Carousel instance.
.enable() → {carousel}
Enables a Carousel instance.
.next() → {carousel}
Moves the list to the next page.
.prev() → {carousel}
Moves the list to the previous page.
.refresh() → {carousel}
Triggers all the necessary recalculations to be up-to-date.
.select(page) → {carousel}
Moves the list to the specified page.
Events
'itemsadd'
Event emitted when the component creates new asynchronous empty items.
// Create a new Carousel with items asynchronously loaded.
var carousel = new ch.Carousel({
'async': 10
}).on('itemsadd', function (collection) {
// Inject content into the added <li> elements
$.each(collection, function (i, e) {
e.innerHTML = 'Content into one of newly inserted <li> elements.';
});
});
'next'
Event emitted when the component moves to the next page.
carousel.on('next', function () {
alert('Carousel has moved to the next page.');
});
'prev'
Event emitted when the component moves to the previous page.
carousel.on('prev', function () {
alert('Carousel has moved to the previous page.');
});
'ready'
Event emitted when the component is ready to use.
// Subscribe to "ready" event.
carousel.on('ready', function () {
// Some code here!
});
'refresh'
Event emitted when the component makes all the necessary recalculations to be up-to-date.
// Subscribe to "refresh" event.
carousel.on('refresh', function () {
alert('Carousel was refreshed.');
});
'select'
Event emitted when the component moves to another page.
// Subscribe to "select" event.
carousel.on('select', function () {
alert('Carousel was moved.');
});