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。
网盘下载密码：iq2s
