Elastic Slider Save

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

Project README

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;
}
Open Source Agenda is not affiliated with "Elastic Slider" Project. README Source: lmgonzalves/elastic-slider
Stars
83
Open Issues
10
Last Commit
1 year ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating