Elastislide Revised

Elastislide, the responsive image carousel, has been updated and improved. It can be used vertically or horizontally and a minimun number of visible images can be specified.
Elastislide Revised

From our sponsor: Try Mailchimp today.

We’ve updated Elastislide, the responsive image carousel. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what options are available.


We’ve updated the demos and added some different examples:

Demo 1: A minimum of 3 (default) images are always visible.

Demo 2: Vertical with a minimum of 3 items visible.

Demo 3: Fixed wrapper with a minimum of 2 images is always visible.

Demo 4: Usage in an image gallery; a minimum of 4 images are visible.

Summary of Changes

  • We have removed the options for the border and margin since we are relying on the border-box box-sizing, so make sure to include that:
    *:before {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
  • Vertical or horizontal layout as an option
  • Unnecessary structural HTML has been removed
  • Several new public methods available: next(), previous(), slideStart() which moves the carousel to the beginning, slideEnd() which moves it to the end.
  • The image width does not need to be specified anymore.

Tagged with:

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

Feedback 65

Comments are closed.
  1. This is a huge disappointment.
    I was a fan of and am using the old version, but i’m perplexed now as to why, in order to function properly, there are 2 additional resources to load.
    Specifically i’m frustrated that I would now need to use your own bundled custom build of modernizr, even though i’m already using my own.

    Why all the dependencies? This is a huge step backwards from a responsive standpoint.

    Wow. There’s no way i’m using this new version. Tremendously ugly on a couple of levels.

    • Hi rory, I’m sad to disappoint you with this new version. We’ve put a lot of thought into this, improved it on many levels and applied a lot of suggestions provided in the comments. You don’t need to use the custom Modernizr build included, you just need to add the feature detection needed if you prefer, which are: prefixed, csstransforms, csstransitions and touch (actually, you don’t even have to use Modernizr for this at all if you like, you can set the Modernizr support test for CSS transitions and transform to false and it would fall back to using jQuery animate, like the previous version). And if you don’t want to use the swipe events, you can simply remove jQuery++. The old version used the jQuery Easing plugin which we removed in the new one and it had an “integrated” plugin for swipe events. So there is really no need to be worried about dependencies. Why do you think it is “backwards from a responsive standpoint”? Thanks for your feedback, ML

  2. I was really hoping that you had added a rotating function to the updated version. It’s a great design, but when I think of a carousel, I think of auto rotating images.

  3. It appears that the carousel is not responding to orientation changes every time. If you rotate the device from profile to landscape, the carousel stays in the portrait mode (taking only half of the available area) until you press the arrow buttons, then it stretches across the whole available area. Tested on Motorola Xoom ICS 4.1

  4. Also, I see that you are using “display:inline-block” for the list items, however “li” elements don’t have the default 4px margins forced by the browser. I’ve came across the piece of code in the plugin:
    // remove white space this.$items.detach(); this.$el.empty(); this.$el.append( this.$items );
    It this the technique you are using for removing the margins?
    If so, can you explain what is going on there, and why?


  5. Great plugin. Works as described. I would, however, love to see the addition of thumbnail captions. I can add my own, and manipulate the css, but, it’s not as elegant as I would like.

    • if( dir === ‘next’ && totalSpace – ( Math.abs( translation ) + amount ) < visibleSpace ) {

      amount = totalSpace – ( Math.abs( translation ) + visibleSpace );

      // show / hide navigation buttons
      this._toggleControls( 'next', false );
      this._toggleControls( 'prev', true );

      else if( dir === 'prev' && Math.abs( translation ) – amount < 0 ) {

      amount = Math.abs( translation );

      // show / hide navigation buttons
      this._toggleControls( 'next', true );
      this._toggleControls( 'prev', false );


  6. Hi,

    I would like to know how to disable the touch features.

    Thanks for this great plugin! ๐Ÿ™‚

  7. hi there, love the new version. one question – can it be made to handle variable *widths* of images in the carousel? at the moment it’s resizing my images to make them all the same width (luckily it keeps the aspect ratio), but i’ve got a mixture of portrait and landscape images to display and would like to have a fixed *height* but variable widths. is that possible? thanks

    • I’ve found a way…a little messy but works for me.

      in _setItemsSize, remove the width setting and then in _slide replace “itemSpace” with the actual sum of item’s width

  8. sorry another quick question – how would i make the next/previous arrows ‘dim’ (i.e. opacity setting) rather than disappear ‘at the end’? have look at the JS bit it’s a bit beyond me to implement this change. has anyone got an example? thanks

  9. Nice! Awesome work as usual.

    how I can extend the plugin to add mouseenter and mouseleave event on the item please?

  10. Hello.
    Thanks for this new version.

    Some questions.

    1) In the previous one we’ll be able to add some HTML content (like text caption for example).
    But with this new one, how can I do it ?
    The text is hidden under the image.

    2) Is there a way to make it circular ?
    I mean :
    – always having the arraw
    – when we click on previous at beginning we see the last slide

  11. The scrolling steps too sharply, and too far – try your own demo and see that you never see image 4 if you’ve narrowed the browser window to only show 3, unless you scroll backwards again from the end – your increments are all wrong! (p.s. I too would love to not need modernizr & JQ++)

  12. Under Firefox 18.0.1 I’m experiencing sometimes a strange behaviour, even with your examples: When sliding, an image gets wiped over the whole slider until the slide motion stops, then everything gets displayed normal. I experienced this only when CSS transforms were used for the sliding motions. I know it’s difficult to imagine, and even more difficult to describe, but I’ve got a screenshot. So, tell me how I can send it over to you.

    • Another problem that I’m facing, again just sometimes, under Firefox (also with your examples): The sliding motion is not smooth. Instead, it jumps directly from the start to the end position.

    • I have the same issue with transition in Firefox 20.0.1
      Can’t even to figure out how to fix that ๐Ÿ™

  13. Thanks for this great carousel!
    How can I start it automatically when the page loads?
    And how can I activate an infinite loop?
    thanks in advance

  14. bump jojo
    “Another problem that Iโ€™m facing, again just sometimes, under Firefox (also with your examples): The sliding motion is not smooth. Instead, it jumps directly from the start to the end position.”

    It seems if you resize the browser then it figures out how many to increment instead of jumping to the end. My images are dynamically generated from a product collection in Magento. I’m not sure if that is the problem. I’ve used this in other parts of the site where the images are already there in the code and it seems to increment properly.

  15. anyone having problem with firefox? i’m using firefox 19.0.1 and sometime image preview won’t change, when i click one of the image on the carousel, the mouse just jump to roughly the center of image preview but nothing else happens. This seems to occur randomly. anyway, thanks for the great job

  16. Thank you for carousel. How to change the width of the image to 100% which is in folder “Small” ? if the image is 300 px, it still shows a width of 150 px. Help ?? please ๐Ÿ™‚