Elastic Image Slider With JavaScript And SVG – Elastic Slider

Elastic Slider is a pretty cool background image slider library which makes uses of Snap.svg to create an elastic, stretching animation when transitioning between images.

How to use it:

Load the necessary Snap.svg library from a CDN.

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Load the Elastic Slider’s JavaScript and Stylesheet files in the html page.

<link href="elastic-slider.css" rel="stylesheet">
<script src="elastic-slider.js"></script>

The Html structure for the slider.

<div class="elastic-slider">
  <div id="slide1"></div>
  <div id="slide2"></div>
  <div id="slide3"></div>
</div>

Add background images to the slider.

#slide1 {
  background-image: url("1.jpg")
}
#slide2 {
  background-image: url("2.jpg")
}
#slide3 {
  background-image: url("3.jpg")
}

Create the elastic effect using SVG clip-path:

.clipped-left {
  -webkit-clip-path: url(#clipped-left);
  clip-path: url(#clipped-left);
}
.clipped-right {
  -webkit-clip-path: url(#clipped-right);
  clip-path: url(#clipped-right);
}

Create a new ElasticSlider object to initialize the slider.

new ElasticSlider('.elastic-slider');

Possible options.

 new ElasticSlider('.elastic-slider',{
     // Max distance (px) for stretching effect.
     maxStretch: 100,
     // Parameter that allows to customize the curve in the stretching effect. 
     // A setting of 0 results in straight lines, and higher values result in steeper curves.
     bezierLen: 80
 });