🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Elastic Slider is an experimental slider using SVG clip-path feature and animations powered by Snap.svg.

Animation Slider SVG Tutorial

Documentation

Elastic Slider

An experimental slider using SVG clip-path feature and animations powered by Snap.svg.

DEMO

Article

Usage

First you need to include the elastic-slider styles and scripts, along with external Snap.svg library. Then you can create a basic HTML markup and initialize the slider.

<!-- CSS: The inline piece is needed to work properly --> <link rel="stylesheet" href="elastic-slider.css"> <style>     .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);     } </style>  <!-- JS --> <script src="snap.svg.js"></script> <script src="elastic-slider.js"></script>  <!-- Basic HTML structure: A div with class 'elastic-slider' and three children at least --> <div class="elastic-slider">     <div id="image1"></div>     <div id="image2"></div>     <div id="image3"></div> </div>  <!-- Simple 'elastic-slider' initialization --> <script>     new ElasticSlider('.elastic-slider'); </script>

Install with NPM

npm install elastic-slider 

Customization

The ElasticSlider constructor asks for 2 parameters:

  • el: DOM element or string selector.
  • options (optional): Slider options in object notation.

All possible options

Name Type Default Description
maxStretch integer 100 Max distance (px) for stretching effect.
bezierLen integer 80 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.

Change dimensions

Default width and height values are 600px and 400px respectively. You can change these values easily in CSS, like:

.elastic-slider{     width: 400px;     height: 300px; }

You May Also Like