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.

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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 131

Comments are closed.
  1. 1

    Hi !
    First of all, that’s a really nice plugin. So nice that we decided to use it for one of our project :)

    BUT… I found a little trouble.
    And I don’t know if there is a proper way to resolve it.

    Here is the case.
    The site is mobile only.
    We have a carousel, which take the full width of the screen.
    One carousel has pictures which takes approximately the whole width of an iPhone screen.
    Everything works fine when we slide on the X axis (the carousel scolls).
    But it completely locks the scroll of the page on the Y axis, which is a real trouble, when, for example you’re in landscape mode (you can’t see the rest of the page).

    So I try to replace preventDefaultEvents : true by preventDefaultEvents: false
    It works, but I’m not really convinced. The carousel ain’t smooth no more…

    May be there is some adjustments to do in the script, but my knowledge doesn’t go that far.
    So if you have any suggestions, it would be really nice.

    Thanks by advance.

    • 2

      Hello,
      I’m find the same bug. Do you find the solution ?
      Thanks for all !
      Chris

  2. 3

    If you’re trying to change it so that it only advances one thumbnail at a time, change line 295 from this:var amount = this.fitCount * this.itemW, val; to this: var amount = this.itemW;

  3. 4

    HI,

    Elastislide is a great responsive carousel plugin and am currently using it to develop a portfolio site.

    I am trying to build a simple navigation system that, when a link is clicked, the carousel will slide to a specific image.

    I know you can get the $item.index() from a clicked item, as stated above, is there anyway this can be used to automatically slide to a item number on click?

    Any help or a nudge in the right direction would be great

    Thanks in advance,

    Dan

  4. 5

    Hi,

    Must say that Elastislide is indeed a wonderful Slider! What a nice discovery.

    I was wondering if it is difficult to implement keyboard navigation?
    I saw it was done in the “Responsive Image Gallery with Thumbnail Carousel” based on this one.

    But I know far to little about Jqiery to write it myself :)

    Has someone already found the correct code for this?

    Thanks in advance!!

    Warm regards, Marian

  5. 6

    Very nice plugin! If anyone has a working example of dynamically adding items to the carousel without having the new images “stacked” (one per row), would be interested to see how it’s done. I’ve tried adding a call to “$(window).triggerHandler(‘resize.elastislide’);” but it doesn’t seem to work.
    Thanks!

  6. 7

    What an outstanding script – this is absolutely phenomenal!
    I have a quick question if there is a way to have it autoscroll without the need of clicking – has anyone an idea how to achieve that?

    Some help would be greatly appreciated, thank you

  7. 11

    I am trying to integrate this jquery slideshow into joomla. I have gotten others to work, but I can’t seem to get this one to function. Ideas?

  8. 12

    Lovely slider. Is there an easy way to have it auto scrollingwhen it is loaded. So the images scroll through automatically?

  9. 13

    Am I the only one having issues with this in ie? (both 7 and 8)

    Seems the thummnails don’t load all the way, and does not show the photo in the body either.

  10. 14

    Help!!!!
    I was wondering if you have a fix for an issue I am having. I am pushing HTML into the DOM from another javascript file I have made. Currently I push list items with an image into the ul but it shows up after the DOM has loaded causing the images to show up as a vertical list within the carousel. If i add list items with images in the HTML document itself, it works fine. Any ideas?

  11. 15

    Amazing plugin. Thanks so much for your hard work on this. I’m having a wee issue. I’m using the script in wordpress, everything seems to be loading fine, however for some reason the ul is given a width of 24px which seems to equate to the sum of the margins within the ul and doesn’t include the image width. Consequently, the images aren’t lining up quite right. Any ideas?

    • 18

      I edited the elasticslide suorce code with this:


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

      and this is my initialization:

      $('#carousel').elastislide({
      imageW: 150,
      onClick : function( $item ) {
      return true;
      }
      });

      bye

  12. 19

    There’s an annoying javascript ad blocking part of the slider. Can’t seem to hit the close button for it on my phone. Kind of ruins the whole demo.

    • 20

      Hi dutch201, thank you for letting us know and sorry about that, we’ll make a better ad solution for mobile browsers. Thanks, ML

  13. 21

    Hi! This plug is really great, but have hit a weird error where links won’t open – I’ve checked my markup but can’t find a reason for it, and the links (the # links) in the demo won’t open on Chrome either – so weird.

    Some fancybox links are working fine on another implementation, but I can’t tell if it’s just the FB overriding the hrefs?

    Any advice appreciated :]

  14. 22

    Awesome work there mate..

    Can anyone please tell me how to add overlay text on each image.

  15. 24

    Hi,

    Well done on this plug-in, its simple and effective! I’ve been reading everyone’s comments and of course everyone would like extra features added in! Mine would be the ability to ALWAYS SHOW the navigation? Is there a way to do this? Basically my theme looks a little off centre if the navigation doesn’t show so i was hoping there might be a way of always showing the navigation but just graying out the one that doesn’t need to be pressed?

    Any help would be fantastic? Thanks!

    • 25

      Hmm – just figure out a quick and dirty way ..

      Line 81, add an option to the defaults …

      $.elastislide.defaults = {
      snfbh : false, ‘stop nav from being hidden’ – prevent navigation on being hidden!
      };

      Line 214, add this variable logic …

      if ( !this.options.snfbh ) {

      // show / hide navigation buttons
      if( dir && status ) {
      if( status === 1 )
      ( dir === ‘right’ ) ? this.$navNext.show() : this.$navPrev.show();
      else
      ( dir === ‘right’ ) ? this.$navNext.hide() : this.$navPrev.hide();
      }
      else if( this.current === this.itemsCount – 1 || this.fitCount >= this.itemsCount )
      this.$navNext.hide();

      }

      Then in your declaration, add the variable as TRUE …

      jQuery( document ).ready(function () {
      $(‘#carousel’).elastislide({
      snfbh : true
      });
      });

  16. 26

    I’m having an issue with using multiple instances in the same site, not the same page. The layout gets wonky in that it’s either vertically oriented and positioned left, or it’s tiny and at the bottom. Should it matter if I call carousel1 and carousel2 on different pages, so long as I have id="carousel1" and id="carousel2"?

Comments are closed.