Thursday, October 18, 2012

Elastislide - A responsive jQuery carousel plugin

Elastislide

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel's structure into a container with a fluid width will also make the carousel fluid.

In a carousel, one could think that simply making its container "shorter" will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide's properties.

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

The images are by Karrie Nodalo and you can find her awesome photos here: Karrie Nodalo's Photostream on Flickr
Her images are licensed under the Attribution 2.0 Generic License.

The HTML

The Markup for the carousel consists of a main wrapper that will adjust to the width of any fluid container you put it into. (If you put the carousel in a container with a fixed width, it will not adapt. So make sure that your container has a fluid layout.)
The carousel element will have an unordered list with linked images:

<div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
        <ul>
            <li>
                <a href="#">
                    <img src="images/medium/1.jpg" alt="image01" />
                </a>
            </li>
            <li>...</li>
            ...
        </ul>
    </div>
</div>

Use your preferred ID and call the plugin like this:

$('#carousel').elastislide({
    imageW  : 180
});

where imageW is the width of the thumbnails.

Options

Elastislide has the following default options:

speed       : 450,  
// animation speed

easing      : '',   
// animation easing effect

imageW      : 190,  
// the images width

margin      : 3,    
// image margin right

border      : 2,    
// image border

minItems    : 1,    
// the minimum number of items to show. 
// when we resize the window, this will 
// make sure minItems are always shown 
// (unless of course minItems is higher 
// than the total number of elements)

current     : 0,    
// index of the current item
// when we resize the window, 
// the plugin will make sure that 
// this item is visible 

onClick     : function() { return false; } 
// click item callback
// Example of how to get the index
// of the clicked element:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'The clicked item´s index is ' + $item.index() )
    }
});
*/

It is also possible to dynamically add new items to the carousel. The following is an example on how to achieve that:

var $items  = $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );

View Demo