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;
}