Elastislide Revised

View demo Download source

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.