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.

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

Feedback 135

Comments are closed.
  1. Okay, I got it to work. Now, I’m trying to call an active state on the item I chose (I added captions) but they are not taking. Where should I try to do that with jQuery?

  2. Great plugin!

    Got it working nicely with a project. Each image is linked to a page, however, but when clicked, they do nothing; as in they dont go to the page they’re linked to.

    Suggestions?

  3. Hi Mary Lou,
    Really great plugin !

    I just added the removal of nav to the destroy function and a function to remove an element dynamically !
    _removeControls :function(){ this.$el.find('.es-nav').remove(); }
    _destroy : function( callback ) { this._removeControls(); this.$el.unbind('.elastislide').removeData('elastislide'); $(window).unbind('.elastislide'); if ( callback ) callback.call(); }
    remove : function( $elem, callback ) { // adds new items to the carousel $.each(this.$items, function(i, v) { if (v == $elem) v.remove(); }); this.itemsCount = this.$items.length; this._setDim(); this._setCurrentValues(); this.$slider.css({ width : this.sliderW }); this._slideToCurrent(); if ( callback ) callback.call(); }

    Cheers !

  4. Hey great tutorial! Is there any way to make text appear on a gray transparency when the mouse is hovering over one of the images? Thanks

  5. Awesome Tutorial Mary Lou.

    i am working on a wordpress project but i cant seem to get this Carousel to work within wordpress.

  6. Thanks a lot for the plugin, very useful.. _BUT_:
    when I want to add a new item dinamically to the carousel, it doesn’t work properly…just following the instructions:
    var $items = $('<a href="#" rel="nofollow"></a><a href="#" rel="nofollow"></a>'); $('#carousel').append($items).elastislide( 'add', $items );
    it adds the 2 with the images outside the and beneath the slider. Indeed isn’t the right behavior.

    Some suggestion?

    • it adds the 2 with the images outside the and beneath the slider. Indeed isn’t the right behavior.

      Some suggestion?

  7. I mean:
    it adds the 2 “LI” with the images outside the “UL” and beneath the slider.

  8. This is a really nice idea, but not very useful without a “circular” option to allow the list elements to loop infinitely. Otherwise it’s a bit of a misnomer to call it a “carousel”.

  9. I agree with Ben above. Only after implementing this plugin did I realize there’s no circular option, which I need. Everything else is nice enough though.

  10. just curious if there’s an easy way to create deep-linking or permalinks so that i can send a link directly to an img in the album? thanks!

  11. The plug in is looking really great !!! But simply doesn’t work: when i click on an image inside the carousel it doesn’t link to the page i want to go …. nothing happen !! Am i doing a mistake ??? Anyone could explain why ???
    Thanks a lot

    • This question has been answered a few times already in the previous posts:
      In jquery.elastislide.js line 265, replace:
      // item click event
      this.jQueryitems.bind(‘click.elastislide’, function( event ) {
      instance.options.onClick( jQuery(this) );
      return false;
      });
      with
      // item click event
      this.jQueryitems.bind(‘click.elastislide’, function( event ) {
      instance.options.onClick( jQuery(this) );
      //return false;
      });

  12. Nice plugin! I would like to see captions handled somehow. Overall really nice job!

  13. When i resize the browser window (command -) the carousel wrapper become double height and leave a blank space under the pictures. Any idea why this behaviour ??? How could that be fixed? I use safari and chrome. Thanks a lot!!

  14. This plugin is great! I did have to add the jQuery(window).triggerHandler('resize.elastislide'); in order to get the stacking to stop, but for some reason this isn’t working on an ipad with os 4. Does anyone have any idea how to fix that?

  15. @shadowbreaker and others

    Deeplinking support:

    add ‘class=”selected” to the li IE:



    add this code at the top of the ‘init()’ method :
    var $deeplink = $(‘ul > li.selected’);

    if ($deeplink.length) {
    var deeplinkIndex = $items.index($deeplink);

    if (deeplinkIndex) {
    current = deeplinkIndex;
    }
    }

    Cheerio

  16. Hello,

    Can you please share code about how to integrate fancybox with in this current demo?

    I want to open full slider in fancybox when main image click & also want to do like that when change image from main slider then animation apply like image sliding left to right or right to left.

    Please help me.

    It’s urgent for me.

  17. Hello,

    How do we destroy the function if we have just one single slide, it seems if you slide/swipe (on desktop and tablet) on the right/left side of the image (not over), arrows are displayed and slide receives a xxx px translation (it gets pushed to the right side).

    Thank you

  18. Hello
    I have already tried it but it doesn´t seem to work in an Iphone. Since it is responsive, should it works like that or do I need any other code?
    Thanks