基于SVG clip-path的弹性过渡幻灯片特效

elastic-slider是一款基于SVG clip-path的弹性过渡幻灯片特效。该幻灯片使用Snap.svg来驱动路径动画，在拖动图片时以波浪形的弹性效果切换幻灯片。

安装

可以通过npm来安装elastic-slider幻灯片插件。

npm install elastic-slider                  
                

使用方法

在页面中引入elastic-slider.css和snap.svg、elastic-slider.js文件。

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

HTML结构

该弹性幻灯片采用嵌套<div>的HTML结构。

<div class="elastic-slider">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
</div>
                

CSS样式

SVG路径是通过JS代码动态生成的。需要以内联的方式添加下面的CSS代码，指定左右SVG剪裁路径。

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

另外图片使用background-image属性来分别指定。

你可以修改.elastic-slider中的height和width属性来修改幻灯片的尺寸。

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

初始化插件

可以通过new ElasticSlider()方法来实例化一个elastic-slider幻灯片对象。

new ElasticSlider('.elastic-slider');                  
                

配置参数

ElasticSlider构造函数接收两个参数：

• el：DOM元素的选择器。
• options：可选，幻灯片的参数对象。

可用的配置参数如下：

elastic-slider弹性SVG路径幻灯片的github地址为：https://github.com/lmgonzalves/elastic-slider。