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.

By Manoela Ilic in Articles on
Demo Code

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.

Demos

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

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

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

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

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

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: 
    *,
*:after,
*: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.

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.

Surface Sampling in Three.js

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

How to Create a Cover Page Transition

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 65

Comments are closed.

  2. Amazing , I’m gonna implement it right now for my photography coming soon page… Thanks @Codrops.. 🙂

  3. I always love my the Codrops updates, you are awesome gusy! 🙂

    About the demo: back button is not working on #4 with the latest Opera browser.

    • One more thing: blank carousel with only one image on the right corner – using Firefox 15.0.1 on Example 3. Resizing the browser change the picture.

  4. This is really beautiful. Is there a way to show titles, or captions for the images? I’ve added them to the items, but they don’t appear under the images. Thank you!

  5. Thanks a lot you guys! You always manage to make a great and working concept better. This is definitely my best code find today 😉

  8. The navigation buttons works on #4 but now, can not change the image. I click the thumbs but not happening anything.
    Win XP, latest Opera browser.

  11. Awesome stuff, i am trying to make it work in ie7.
    I think we only need to fixed the width of the UL to make it work with the below css.
    I temporary tested it with setting the width in the css, but off course this is not dynamic and won’t work if we
    add new items or delete them. So i wonderd if someone can help with the js part to make it work on ie7 to.

    /* Internet Explorer 7 fixes */

    .lt-ie8 .elastislide-wrapper ul#carousel {
    width: 200%;
    }
    .lt-ie8 .elastislide-wrapper ul#carousel li {
    float: left;
    display: inline;
    }

    Keep up the good stuff Codrops.

    Regards,

    Robin Klein Schiphorst

  12. I also wondered if it is possible to make the carousel with multiple rows instead of one.

    Regards,

    Robin

    • I’m extending the plugin right now to allow different image sizes. Will post the updates once I’m done with it 🙂

  15. Please update your image vamp tutorial please. Since the jQuery library was updated the right sidebar doesn’t work well. I think its an awesome script an it deserves to be updated (if you have the time for it, of course).

  17. I don’t get this to work on jQuery Mobile, then he talks about Uncaught TypeError: Object # has no method ‘prefixed’.

  18. Hey, can I add prev/next buttons to navigate between preview images? like the responsive gallery

  19. Hello!

    As I can tell, you must get a ton of questions. I was hoping that perhaps you might answer mine? I’m trying to place four elastislide carousels stacked on top of one another on one page. I have gone crazy trying to figure it out. It doesn’t work if I simply multiply the code in html. I am a total newbee to coding and unfortunately my JS skills are lacking. Can I assume it’s something in the JS that prevents more than one carousel on a page?

    Thanks! n

  20. Hey There!

    Is there an easy way of attaching the new fancybox to this slider? so that when people click the image it pops up in a fancybox popup?

    I am really stuck and i would really appreciate all your help on this a.s.a.p!

    Thanks!!
    James

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

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

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

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

    Thanks.

  25. 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 );

      }

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

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

  31. Nice! Awesome work as usual.

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

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

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

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

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

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

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

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

  41. does anyone still have any idea about how to use different width images?
    would be great help : (

  42. Hello,

    I use the first time this plugin, and encountered an issue in Chrome, so I´m wondering if anyone has exeprienced this before:
    – I have to resize the images in the carousel based on the height of the viewport, on resize I destroy the carousel, so it adopts to the latest image size. It works perfectly in every browser (even IE8), but in Chrome.

    Any idea?

    • Hi Robert

      I am also trying to achieve similar functionality. Can you tell me what code/function you have used to Destroy the carousel.

      Thanks

  43. Hi, Im trying to use this plugin in multiple instances within the same page. I was wondering if this is even possible. I have changed the ids of the carousels so the y dont conflict and repeated the script with the aforementioned changes also. This makes the very fist instance null to an effect because ti does not show the large picture bellow ( Im using the example #4) although it does show the active bordered state. Any ideas how I could manage to make this work?

  44. Hi, i was trying to combine this carousel with lightbox, but unfortunately it didn’t work, may be somebody knows the lightbox it can work with? Thank you.

  45. I’d love to use this plugin but it would have to support different image size.

    Does anyone know if that support will be added?

  46. Is there any support for paginated buttons, instead of just the normal left and right buttons?

  47. Hi awesome plugin and i have doubts in this slider how to auto slide the slider can you explain ?

  50. I am using the elastislide inside . When I do, I lose the properties that allow for resizing and have to specify a width (e.g. 550px) to keep it within the fieldset. When I resize my browser, the elastislide does not resize, losing the feature I find most attractive (of course). Is there a CSS setting that I’m missing here?