From our sponsor: Elevate all your marketing with Mailchimp Smarts.
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.
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:
*, *: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.
I love u Codrops <3
Amazing , I’m gonna implement it right now for my photography coming soon page… Thanks @Codrops.. 🙂
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.
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!
Thanks a lot you guys! You always manage to make a great and working concept better. This is definitely my best code find today 😉
Great share…… 🙂
Awesome Post… Thats why i like CODROPS…….
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.
Lightbox effect on the slide, .. then that will be great
Awesome post dude
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
I also wondered if it is possible to make the carousel with multiple rows instead of one.
Regards,
Robin
Is there a way to have different width images in the carousel?
I’m extending the plugin right now to allow different image sizes. Will post the updates once I’m done with it 🙂
have a q?!
how to play auto index.html??
please help ??
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).
How can it be autoplayed?
I’m looking for autoplay functionality as well, anyone have any success?
I don’t get this to work on jQuery Mobile, then he talks about Uncaught TypeError: Object # has no method ‘prefixed’.
Hey, can I add prev/next buttons to navigate between preview images? like the responsive gallery
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
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