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 | 自动播放间隔时间(秒)