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

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. If you, like me, want to link the images with Shadowbox, you can simple put something like this:

    $(‘.es-carousel-wrapper’).elastislide({
    imageW : 200,
    onClick : function( $item ) {
    Shadowbox.open();
    }
    });

    Don’t forget to initialize shadowbox before the call ;D

  2. This is almost perfect for my current project. Only problem I’m having is how to adjust the width of the elements. Something (in script?) is setting them at 80px and I need control over this.

    Thanks!

  3. @BRUNO CANTUÁRIA i tried to link images with shadowbox. it work on normal pictures but gallery photos. can you explain a little bit more?

  4. @Miguel and Ryan:
    On line 229 in the class, you can see that the window.resize event is being bound to a lambda function that causes reinitialization to occur.
    For those of us loading the content we wish to carousel, and the carousel script itself, and the css, and whatnot else with javascript via an AJAX request, it might be useful to change the event that function binds to.
    In my case, I just did a hack job because I literally had 10 minutes to implement this code; I just duplicated the function, bound the window.mouseover event to it, and set up a class variable that tells my duplicate function not to reinitialize when I mouse over any other time after the first. A resize resets the class variable.
    Hey, it works… 😀

  5. Thanks, Mary Lou.
    This is perfect developed stuff, works so precise.

    How to slide not fixed width images?

    I would love to give other width for one or two items, but after specify the ID to them and setting their width more than it is in imageW (295px) parameter,

    $(document).ready(function() {
    $(“#ID”).css(“width”,”590px”);
    });

    there was no space in container for all items.

    So I have added 295px to sliderW parameter (line 168):

    width : this.sliderW + 295

    and now no items goes down but there is no posibility to see the whole last item – it stays hidden by browser window.

    Do you have any idea how to solve it?

    However I only want to slide not fixed width images…

    Thx,
    .m.

  6. Like always on Codrops, great stuff! When trying to implement the code into a mobile website there seems to be a conflict with the jquery.mobile-1.0a3.min.css. The code doesn’t work with this css in place, when I remove the css, all works fine, but I still need the mobile.css functionality.
    Any thoughts, suggestions? Please look into this.

    Greetings from the Netherlands, Koen.

  7. Never mind the previous post, I’ve solved it.
    Am I right in thinking that I can’t use multiple instances of the same code on a single website? My “first” set of code works like a charm, I can’t get a second and/or third set to work properly. It keeps putting the images outside the carousel, stacked vertically. I’m using the same div’s, same CSS etc. Is this a javascript issue? Please help!

    Any thoughts?

    Greetings from the Netherlands, Koen.

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

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

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

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

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