swiper插件所有配置及作用
时间: 2023-09-07 18:11:44 浏览: 59
Swiper 是一款轻量级的移动端触摸滑动插件,可以用于制作轮播图、相册、列表滑动等移动端页面效果。以下是 Swiper 的常用配置及作用:
1. direction:滑动方向,默认为水平方向,可选参数为 vertical(垂直方向)。
2. speed:滑动速度,单位为毫秒,默认为 300。
3. autoplay:自动播放,可选值为 true 或 false,默认为 false。
4. autoplaySpeed:自动播放的间隔时间,单位为毫秒,默认为 3000。
5. loop:是否循环滑动,可选值为 true 或 false,默认为 false。
6. pagination:是否创建分页器,可选值为 true 或 false,默认为 false。
7. navigation:是否创建前进和后退按钮,可选值为 true 或 false,默认为 false。
8. effect:切换效果,可选值为 slide(平移),fade(淡入淡出),cube(立方体旋转),coverflow(3D流式效果),flip(3D翻转效果),默认为 slide。
9. grabCursor:是否开启抓手光标,可选值为 true 或 false,默认为 false。
10. threshold:拖动距离阈值,超过该距离将触发滑动效果,单位为像素,默认为 50。
11. touchRatio:拖动距离与滑动距离的比例,可选值为 0~1 之间的小数,默认为 1。
12. touchAngle:滑动方向与触摸方向的夹角范围,超过该角度将取消滑动效果,单位为度数,默认为 45。
13. resistance:滑动阻力系数,可选值为 true 或 false,默认为 true。
14. resistanceRatio:滑动阻力系数的值,值越大滑动阻力越大,默认为 0.85。
15. on:事件回调函数,如 onInit、onSlideChangeStart、onSlideChangeEnd 等。
通过以上配置,可以灵活地实现 Swiper 的各种功能和效果。