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.
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
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
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.
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
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.
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.
Hi,
is there an easy way to always show the previous-button?
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 );
}
woww it’s great 😀
Hi,
I would like to know how to disable the touch features.
Thanks for this great plugin! 🙂
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
I’d also love to do that!
@Srok: Would be thankful if you could post your changes.
thanks srok – i can’t get this to work. do you have an example? thanks!
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
Nice! Awesome work as usual.
how I can extend the plugin to add mouseenter and mouseleave event on the item please?
how i can destroy the Elastislide?
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
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++)
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 🙁
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
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.
Great Work =D
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
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 🙂
does anyone still have any idea about how to use different width images?
would be great help : (
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
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?
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.
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?
Is there any support for paginated buttons, instead of just the normal left and right buttons?
Hi awesome plugin and i have doubts in this slider how to auto slide the slider can you explain ?
Hello alla,
There is problem when navigate t the 4th index directly : http://tympanus.net/Development/Elastislide/index4.html
The links are not working! the images are not clickable, I have the same problem in my site. any help please?
Thanks in advance.
Hi there! I only have a few thumbnails…. is there a way to center the thumbnails in the slider, rather than having them snap to the left? I’m trying to get this to work with the Responsive Image Gallery with Thumbnail Carousel, which also uses the elastislide. Please help! thanks!
http://tympanus.net/codrops/2011/09/20/responsive-image-gallery
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?