in News & Updates
65 Comments

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.

View demo Download source

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

Find this project on Github

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.
Previous:
Next:

Tagged with:

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+

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 65

Leave a comment
  2. 2

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

    Reply
  3. 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.

    Reply
    • 4

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

    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!

    Reply
  5. 6

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

    Reply
  8. 9

    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.

    Reply
  11. 12

    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

    Reply
  12. 13

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

    Regards,

    Robin

    Reply
    • 15

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

  15. 17

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

    Reply
  17. 20

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

    Reply
  19. 22

    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

    Reply
  20. 23

    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

    Reply

Follow this discussion

Leave a Comment