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.

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

Editor-in-Chief at Codrops. Designer, developer, and dreamer β€” sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

Browse amazing websites

πŸ’Žβœ¨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.