本文详细介绍了Swiper的基础功能，包括触控比例设定、鼠标模拟触控、水平/垂直模式选择、自由模式（Free Mode）的使用、旋转与尺寸调整、反向滑动设置、单向滑动限制、内置分页控制、自动播放（autoplay）、循环模式（Loop mode）、滑动容器以及嵌套Swipers的应用。Swiper不仅限于图片轮播，能容纳各种HTML内容，适用于PC和移动端。
1、触控比例，通俗讲就是规定滑动距离切换动画
Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio）
触摸比例。触摸距离与slide滑动距离的比率。
默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动
设置为0.5后slide滑动距离只有触摸距离的一半，变得难以滑动，缓慢拖动查看效果
设置为2后slide滑动距离为slide宽度一半时放手，即可切换到下一个slide
2、鼠标模拟手机触摸。
这个功能对于开发PC网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件（点击以及拖曳滑块）
默认为true，Swiper接受鼠标点击、拖动
设置为false后鼠标拖动无效，移动端仍可正常滑动。
3、水平/垂直
Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直运动的滑动），默认为水平滑动
4、自由模式（Free Mode）又称抵抗反弹
这种模式没有slides 定位，默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模 式，slide会根据惯性滑动可能不止一格且不会贴合。和css样式中的hidden：scroll；差不多，个人觉得后者在移动端反而反而 更方便，如果觉得后者多了滚动条不好看，可以通过样式将滚动条隐藏&#
最低0.47元/天 解锁文章
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
