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.

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.


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:
    *: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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 65

Comments are closed.
  1. 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.

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