From our sponsor: Wix’s robust, secure platform lets you develop faster and deliver smarter.
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.
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?
I’m new to js, much needed in this slide autoplay someone help me?
Hey,
I was wondering if someone could help me with implementing per thumbnail slide rather than the whole row sliding to the next. Not sure which part of the script I need to edit in order to make this work properly. I tried a few changes but without any success.
Any help would be appreciated.
Thanks.
Is there a way to handle different image widths?
Good day.
I installed the script but with the version of jquery it does not work the rest of my site, using this:
Your script uses:
1 – When I add a line of jquery does not work at all on my site that previously worked
2 – When you remove your jquery works and opens correctly, but the navigation arrows do not work
Can you help me isolate this module or error and make the libraries are compatible?
Any tips?
Thank you.
Greetings from Brazil.
Bom dia.
Instalei o script porem com a versão do jquery dele não funciona o restante do meu site, que esta usando:
O seu script usa:
1 – Quando adiciono sua linha de jquery não funciona nada no meu site que funcionava anteriormente
2 – Quando removo seu jquery funciona e abre corretamente, mas as setas de navegação não funcionam
Pode me ajudar a isolar este modulo ou erro e fazer com que as bibliotecas sejam compativeis?
Alguma dica?
Muito obrigado.
Saudações do Brasil.