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 in News & Updates on
Elastislide Revised
View demo Download Source

From our sponsor: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

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.
Find this project on Github

Tagged with:

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

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