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: Convert designs into clean, developer-friendly React, Vue and HTML code with Anima.

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.

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

Comments are closed.

  1. does anyone still have any idea about how to use different width images?
    would be great help : (

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

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

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

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

  6. Is there any support for paginated buttons, instead of just the normal left and right buttons?

  7. Hi awesome plugin and i have doubts in this slider how to auto slide the slider can you explain ?

  10. 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?

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

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