From our sponsor: Leverage AI for dynamic, custom website builds with ease.
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.