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

简要教程
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：可选，幻灯片的参数对象。

可用的配置参数如下：
参数     类型     默认值     描述
maxStretch     integer     100     弹性拉伸效果的最大距离，单位像素。
bezierLen     integer     80     弹性拉伸效果的自定义曲线参数。设置为0将变为一条直线，数值越大，曲线越弯曲。

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

在线预览 网盘下载

网盘下载密码：x8wt