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 Manoela Ilic in Articles on
Demo Code

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.

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.

Lines to Content Layout Animation

How to Code a Subtle Shader Background Effect with React Three Fiber

Tropical Particles Rain Animation with Three.js

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 65

Comments are closed.

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

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