ch.Carousel

Description

Carousel is 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 jQuery or Zepto.
var carousel = $(selector).carousel([options]);

// Create a new Carousel with disabled effects.
var carousel = $(selector).carousel({
    'fx': false
});

// Create a new Carousel with items asynchronously loaded.
var carousel = $(selector).carousel({
    'async': 10
}).on('itemsadd', function ($items) {
    // Inject content into the added 
 elements
    $.each($items, function (i, e) {
        e.innerHTML = 'Content into one of newly inserted 
 elements.';
    });
});

Parameters

• $el - jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector 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 widget. 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.
  • limitPerPage - Number : Set the maximum amount of items to show in each page.

Properties

.Carousel#name String

The name of the widget.

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 widget creates new asynchronous empty items.

// Create a new Carousel with items asynchronously loaded.
var carousel = $(selector).carousel({
    'async': 10
}).on('itemsadd', function ($items) {
    // Inject content into the added 
 elements
    $.each($items, function (i, e) {
        e.innerHTML = 'Content into one of newly inserted 
 elements.';
    });
});

'next'

Event emitted when the widget moves to the next page.

carousel.on('next', function () {
    alert('Carousel has moved to the next page.');
});

'prev'

Event emitted when the widget moves to the previous page.

carousel.on('prev', function () {
    alert('Carousel has moved to the previous page.');
});

'ready'

Event emitted when the widget is ready to use.

// Subscribe to "ready" event.
carousel.on('ready', function () {
    // Some code here!
});

'refresh'

Event emitted when the widget makes all the necessary recalculations to be up-to-date.

// Subscribe to "refresh" event.
carousel.on('refresh', function () {
    alert('Carousel was refreshed.');
});

'refresh'

Event emitted when the widget 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 widget moves to another page.

// Subscribe to "select" event.
carousel.on('select', function () {
    alert('Carousel was refreshed.');
});