Elastic Slider is an experimental slider that uses the SVG clip-path feature and Snap.svg-powered animation.

elastic image slider, elastic slider github, responsive thumbnail slider, image slider in javascript source code, right to left image slider javascript

Pure JavaScript Slider Image Carousel With Or Without Thumbnails

How to make use of it:

Download the necessary Snap.svg library from the 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 onto the HTML page.

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

Lightweight and Powerful Responsive Carousel Slider Javascript Plugin | Splide

Html structure for 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 flex effect using the 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

});

All possible options

Elastic Image Slider Plugin/Github

See Demo And Download

Official Website(lmgonzalves): Click Here

This superior jQuery/javascript plugin is developed by lmgonzalves. For extra Advanced Usage, please go to the official website.