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