Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
Elastislide

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

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 image 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++ for the swipe events on touch devices.

The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0).

The HTML Structure

When using the plugin, you’ll simply have to apply it to an unordered list with images (optionally with anchors). Make sure the surrounding container is fluid, i.e. has a percentage-based width. (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.)

<ul id="carousel" class="elastislide-list">
	<li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
	<li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
	<li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
	<!-- ... -->
</ul>

Use your preferred ID and call the plugin like this:

$('#carousel').elastislide();

Options

Elastislide has the following default options:

$.Elastislide.defaults = {
	// orientation 'horizontal' || 'vertical'
	orientation : 'horizontal',

	// sliding speed
	speed : 500,

	// sliding easing
	easing : 'ease-in-out',

	// 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)
	minItems : 3,

	// index of the current item (left most item of the carousel)
	start : 0,
	
	// click item callback
	onClick : function( el, position, evt ) { return false; },
	onReady : function() { return false; },
	onBeforeSlide : function() { return false; },
	onAfterSlide : function() { return false; }
};

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


var carousel = $('#carousel').elastislide();
...

$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

Note that if you use the Elastislide for a vertical layout, the height of the container will be automatically set according to how many images you choose to be visible.

This works down to IE8, but if you’d like to use it in IE8 you’ll need to add comments in your list in order to prevent white spaces.

Demos

I hope you like this plugin and find it useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 135

Comments are closed.
  1. I, too, am also wondering if there is a way to make the images into links. I thought I could use this for a thumbnail viewer, but it doesn’t seem to be working. 🙁

    Clicking on the thumbnail doesn’t take me to the larger size image I link it to.

  2. would it be possible to use items with different widths? i am desperately looking for a solution for this…

    thx,
    Jürgen

  3. great, thanks! 😀

    is there a way to add pagination to the slider, which highlights the current item?

    m

  4. Super awesome, thanks so much for your hard work on this. Is there a way we can specify how many items to scroll when you click next/previous? I’d like to only scroll 1 image at a time

  5. To fix the problem that links are not working, comment or remove the “return false”; from the line 268.

    FROM:

    // item click event
    this.$items.bind(‘click.elastislide’, function( event ) {
    instance.options.onClick( $(this) );
    return false;
    });

    TO

    // item click event
    this.$items.bind(‘click.elastislide’, function( event ) {
    instance.options.onClick( $(this) );
    });

  6. @Ives Thanks! Saved me a lot of work there! Script functions now as a thumbnail viewer! Excellent!

  7. I’m not sure if this will work for anyone else but I needed a small change for my purposes. So here it is. I needed a long list of images alphabatized with easy access from the keyboard instead of scrolling. You can insert this right after _initEvents around line 225:

    ….

    _initEvents : function() {

    var instance = this;

    // key support
    $(document).keypress(function(e) {
    var code = String.fromCharCode(e.charCode)
    // get the items with the data-key matching the key pressed
    item = $(‘*[data-key=’+code+’]’);
    // get the index of our first match
    idx = item.parent().children().index(item);
    // make sure we have a match then set as current
    if(idx >= 0) {
    instance.current = idx;
    // set values again
    instance._setCurrentValues();
    // slide to the current element
    clearTimeout( instance.resetTimeout );
    instance.resetTimeout = setTimeout(function() {
    instance._slideToCurrent();
    }, 200);
    }
    });

    ….

    Now in your ul give each li a data-key attribute.



    ….

    With this you will be able to hit a key and automatically scroll to the first image starting with that letter. Of course it may need tweeked a bit for others like right now I just have it watching document for keypresses because I have no other inputs on my page. But it shouldn’t be difficult to change for other needs.

    I hope this helps someone. As I have learned quite a bit and have gotten so many ideas from this site.

  8. Hmm… not sure why this didn’t show up in my previous comment but for your list items just include a custom attribute for example:

    data-key=’a’
    data-key=’b’

  9. In example 3, the last item showing in the carousel is the first item when the user advances. My suggested fix is changing line 195 from:

    this.fitCount = Math.floor(this.visibleWidth / this.itemW);

    to:

    this.fitCount = Math.round(this.visibleWidth / this.itemW);