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 Mary Lou,

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

    Thanks….

  2. 2

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

  3. 3

    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.

  4. 7

    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.

  5. 10

    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?

  6. 11

    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?

  7. 12

    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.

  8. 13

    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?

    • 14

      Hello

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

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

  9. 15

    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

  10. 16

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

  11. 18

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

  12. 21

    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.

  13. 23

    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

  14. 24

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

  15. 25

    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!

  16. 26

    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.

    • 27

      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.

Comments are closed.