swiper ——>基础设置

本节主要是对swiper——基础设置介绍。

索引——设置swiper从第几张图片开始轮播,默认值是0;0也是第一张图片。

 

 

过度时间——设置图片轮播时的过度时间,默认值是300ms;

图片滚动方向——设置图片滚动的方向,默认是水平方向。

自动播放间隔时间——自动播放的时间间隔(单位是ms)

自动播放时不接受用户操作——swiper自动播放时操作swiper时会自动停止(建议开启)

计算每个幻灯片的进度——是否显示幻灯片的进度并激活“在可见的幻灯片增加'swiper-slide-visible'类”属性配置;
在可见的幻灯片增加'swiper-slide-visible'类——在可见的幻灯片上增加一个“watchSlidesVisibility”类名。

 

自由滑动——开启自由模式,激活“freeModeMomentumRatio”、

“freeModeMomentumBounceRatio”、
“freeModeMomentum”、

“freeModeMomentumBounce”、

“freeModeSticky”五个属性配置;freeModeMomentumRatio 释放幻灯页之后,幻灯页滑动的距离,默认值为:1

设置的值越大,当释放幻灯页时,幻灯页滑动的距离越大

 

freeModeMomentumBounceRatio 设置幻灯片通过惯性滑动到边缘时的反弹距离,默认值为:1

值越大产生的边界反弹效果越明显,反弹距离越大

freeModeMomentum: 是否设置幻灯页在释放后会继续滑动一段距离,默认值为:true

设置为false则关闭动量,释放幻灯页之后立即停止不会滑动一段距离

freeModeMomentumBounce: 幻灯片通过惯性滑动到边缘时,是否反弹一定距离,默认值为:true

设置为false时禁用动量反弹,幻灯片通过惯性滑动到边缘时,无法反弹

freeModeSticky: 是否设置free模式下的幻灯片自动贴合wrapper,默认值为:false

 

在桌面浏览器显示手形图标——鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。

幻灯片间隔spaceBetween(px)——设置幻灯片之间的距离,默认是0 px。
幻灯片居中——设置幻灯片为居中。

列数设置——设置slider容器能够同时显示的幻灯片数量(carousel模式),默认值是1,可以设置为'auto',会自动根据slides的宽度来设定数量,可以设置为2,那么slider容器将同时显示两张幻灯片。

行数设置——设置多行布局里面每列的幻灯片数量,默认值是1,比如:设置为2,那么在多行布局中,每列会有两个幻灯片。

距左边框距离——设定幻灯片与左边框的偏移量,默认值为0,单位是像素(px)。

距右边框距离——设定幻灯片与由边框的偏移量,默认值为0,单位是像素(px)。

以上是swiper基础设置,swiper还有模式编辑效果设置TOUCH设置其它设置

 

关于我们   |   联系我们   |   项目合作   |   技术文档   |   培训教程   |   友情链接

关注我们: