Swiper

关于Swiper

Swiper是什么：swiper是开源、免费、强大的触摸滑动插件。在移动端和PC端。

swiper可以做什么：实现移动端和PC端的大部分滑动功能。如幻灯片、Tab选项卡、页面滑动切换

Swiper使用方法：参考官网的使用教程Swiper使用方法 - Swiper中文网

版本升级怎么办：一切以官网为准，同样参考官网的教程。

 各种版本下载地址：https://github.com/nolimits4web/swiper

Swiper的常用API

1.swiper初始化：

用于初始化一个Swiper，返回初始化后的Swiper实例。

const swiperInstance = new Swiper(swiperContainer,parameters);

swiperContainer是DOM元素的选择器；parameter是配置参数，是一个对象。

2.配置参数：

initialSlide属性：用于设定初始化时slide的索引，默认值是0；

direction属性：是Swiper的滑动方向，可设置为水平方向切换(horizontal)或垂直方向切换(vertical)；

speed属性：是切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。

effect属性：slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。

fedEffect属性：fade效果参数。可选参数：crossFade。
默认：false。关闭淡出。过渡时，原slide透明度为1（不淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。
可选值：true。开启淡出。过渡时，原slide透明度从1->0（淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。

grabCursor属性：该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）。

slidesPerView属性：设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式（当slidesPerColumn > 1）；

freeMode属性：默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。

loop属性：设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

on属性：注册事件，Swiper4.0开始使用关键词this指代Swiper实例。

 3.事件（在on中注册）

init(swiper)：事件函数，初始化后执行。可选Swiper实例作为参数。

slideChangeTransitionStart(swiper)：回调函数，swiper从当前slide开始过渡到另一个slide时执行。可选Swiper实例作为参数。

slideChangeTransitionEnd(swiper)：回调函数，swiper从一个slide过渡到另一个slide结束时执行。可选Swiper实例作为参数。

4.Swiper常用属性

mySwiper.width：获取swiper容器的宽度。

mySwiper.height：获取swiper容器的高度。

mySwiper.activeIndex：返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。

mySwiper.previousIndex：返回上一个活动块的索引，切换前的索引。

5.swiper方法

slideNext()/slidePrev()切换到下/上一个滑片，slideTo()控制Swiper切换到指定slide。

6.控制类API

autoplay自动切换 /pagination使用分页器导航 /navigation使用前进后退按钮来控制；

Swiper切换：scrollbar为Swiper只能加滚动条/keyboard开启键盘来控制Swiper切换 /mousewheel开启鼠标滚轮控制Swiper切换