API

Full API documentation.

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

.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.

  • page - Number : Reference of page where the list has to move.

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.');
});