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.

By in Playground on
Demo Code

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

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.

How to Code the K72 Marquee Hover Animation

How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP

How to Add More Fun to a Game: Extending “The Aviator”

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 135

Comments are closed.

  3. Hello,

    Can someone help me to use this?

    For my personal website, I would like to use the example 4 Elastislide. I would also like:

    -3 Elastislide on top of each other
    -to use lightbox popups
    -to make the Elastislide circular, after the last thumbnail the first one starts again
    -to let it slide 1 thumbnail at a time

    Can someone help me with this or make a simple template for me?

    Thanks in advance!

  4. I am also trying to get lightbox popups to work with Elastislide. Any help would be most appreciated. 🙂

  6. Nice! Per your other tut, I’m using this with the responsive image slider. But I’m trying to set the speed for elastislide and it’s not working. I’ve tried some of the other settings and they work. But not speed 🙁

    Also, I’d like to add “toggle to full screen” (for the responsive image slider). Might you be able to point me on the right direction?

    Thanks

  8. Thanks for this demo! I need to have 4 or 5 of these the same page. Will this work? Or is it a single instance per page idea???? I am making a hulu type site.

  10. Can anyone tell me how to make this circular? to loop over and over again? Thanks a lot!

  11. Hi Mary Lou,

    I couldn’t see any license info about your carousel. Is it free to use on commercial projects?

    Thanks….

  12. Anything on why the speed isn’t working? I can’t get it to go image to image automatically. Please help.

  13. I cant get this to work to save my life its not showing the images at all i also add display:block and nothing doing everything the example shows.

  17. For who is facing the issue of thumbnails being stacked (showing 2 rows) until resize the window, you can just add this code after the load code:

    $(window).triggerHandler(‘resize.elastislide’);

    For instance, using the sample of this post:

    $(‘#carousel’).elastislide({
    imageW : 180
    });
    $(window).triggerHandler(‘resize.elastislide’);

    I don’t know why this issue happens, but it’s the second time I’m facing it. In some sites it work perfectly, but in anothers I need to add this code. I think it’s something related with CSS.

  18. Hi
    I have a problem trying to use this within a JQuery pane, the arrow controls do not split and show with a dotted box around them over the actual images? Any ideas please?

  19. What is the purpose of the Speed parameter? I presumed it was the auto animate from thumb to thumb. Am I wrong? I can’t get it to work. Maybe this carousel doesn’t do this? Anyone with suggestion on how I might be able to add that?

  20. Ok, got it. There is not autoplay. Speed is for the paging of the carousel. Perhaps that could be made clearer?

    btw, thanks. This helps me out a lot.

  21. Great script,
    1 quick question… My items have <a> pointing to blank pages. Somehow click event doesn’t work. Is it because of your “touch script”?
    Anyone have similar problem?

    • Hello

      You have to put this in jquery.elastislide.js options :

      onClick : function( $item ) { window.location.replace( $item.a.attr("href") ) } // click item callback

  22. I am very impressed to read such a wonderful article. Here I found

    very interesting and informative content that I enjoyed reading it.

    Keep up this great job

  23. Fantastic plugin… If you want to use images with no fixed widths then include this jquery command.
    $(‘.es-carousel > ul > li’).each(function(index){ $(this).css(“width”,’auto’);});

  24. Thanks a lot for the plugin. Is it possible to set an infinite scroll as an option to your plugin?

  25. Awesome script! I’m a big fan of your work!

    I don’t get one thing, I’m trying to use elastislide (ES) with my own gallery script, I’ve found in ES “_slideToCurrent” but how can I use it? For example I’m clicking arrow on big image, and every element of elastislider is element of navigation for that gallery scirpt, so clicking next/prev I know which element from ES is currently displayed, but if it will go to far, it doesn’t scroll there, and I have no clue how to use it properly.

  27. Hi, i’m currently trying to get this to work with a facebook query, I can get the site to connect to facebook and even find the images and return them, but they only appear in one large row but they are in the same format that the gallery is looking for but when I add the it all disappears! feel free to take a peak!
    (ignore most of the site its for testing scripts for myself…)
    http://www.blam-design.co.uk/test/facebook.html

  28. Is there a way to make the calling, ‘Height’, as say, “imageH” instead of width “imageW”? thanks

  29. Excelent Mary! Awesome script you’ve developed! It can do what Flexslider can’t do: a gallery showing multiple (and not just one) responsive images.

    I’m using it right now in a big project and it’s quite easy to implement. By the way I have two questions about this, if you don’t mind:

    1. Is it possible to add a control navigation beyond the left and right arrows? And what if I could keep the left arrow (and right) always visible?

    2. If the elements inside my unordered list is not just images, but a whole of elements like divs, spans and so on, how to treat them to be responsive like it do with images?

    Thanks in advance!

  30. Has anyone converted this into a WordPress plugin yet?

    Or have an alternative to this for wordpress? In need of a post slider that shows multiple post images at one time [in the viewable area], and slides one post at a time. prefer responsive, but will take what I can for now.

    • Hi Paul
      i almost have it working with wordpress but my images are not showing up jet,
      i will let you no when i find the solution.

  31. 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.

  32. 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;

  33. 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

  34. 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

  35. 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!

  36. 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

  38. 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?

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

  40. 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.

  41. 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?

  42. 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?

    • 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

  45. 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.

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

  46. 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 :]

  47. Awesome work there mate..

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

  49. 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!

    • 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
      });
      });

  50. 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"?