0.0.5 • Published 3 years ago
Ng2Swiper
Ng2Swiper是基于swiper5.3.0版本封装的一个用于angular2+的组件。
演示地址
安装说明
使用方法
api
目前只封装了swiper5的部分参数设置，后续会逐步添加。
basic 一般选项
| 名称 | 默认值 | 说明 |
|---|
initialSlide | 0 | 设定初始化时slide的索引 |
direction | 'horizontal' , 'vertical' | 滑动方向 |
speed | 300 | 切换速度 |
grabCursor | false | 鼠标覆盖Swiper时指针会变成手掌形状 |
parallax | false | 开启视差效果 |
parallaxImgUrl | string | 视差背景图 |
parallaxPer | '-23%' | 移动距离 |
parallaxOpacity | 0.5 | 视差透明度变化 |
parallaxScale | 0.5 | 视差缩放变化 |
parallaxDuration | 3000 | 设定视差动画持续时间（ms） |
autoHeight | false | 高度随内容变化 |
uniqueNavElements | false | 控制组件放在container外面的时候，需要用到 |
runCallbacksOnInit | false | 触发回调，如果不想触发，将此设置为false |
slidesPerColumnFill | 'column' , 'row' | 多行布局 |
Slides grid(网格分布)
| 名称 | 默认值 | 说明 |
|---|
centeredSlides | false | active slide会居中 |
centeredSlidesBounds | false | 使得第一个和最后一个Slide 始终贴合边缘 |
navigation | false | 左右箭头切换开关 |
slidesPerView | 1 | slider容器能够同时显示的slides数量 |
slidesPerGroup | 1 | 定义slides的数量多少为一组 |
slidesPerGroupSkip | 0 | 设置跳过分组 |
spaceBetween | 0 | 在slide之间设置距离（单位px） |
slidesPerColumn | 1 | 设置多行布局里面每列的slide数量 |
Free Mode （free模式/抵抗反弹）
| 名称 | 默认值 | 说明 |
|---|
freeMode | false | slide会根据惯性滑动可能不止一格且不会贴合 |
freeModeMomentum | true | free模式动量 |
freeModeMomentumRatio | 1 | 设置的值越大，当释放slide时的滑动时间越长 |
freeModeMomentumVelocityRatio | 1 | free模式惯性速度，设置越大，释放后滑得越快 |
其他参数
| 名称 | 默认值 | 说明 |
|---|
swiperCont | 'swiper-container' | 设置swiper的id |
paginationShow | true | 是否显示分页器 |
isObserver | true | 修改swiper自己或子元素时，自动初始化swiper |
autoplay | false | 自动播放 |
delay | 3 | 自动播放间隔时间(秒) |