Swiper学习之三---swiper的配置选项 ②：Free模式和Effects切换效果

大家好，好长时间没继续更新Swiper的博文了，小伙伴的swiper学习怎么样了呢，萍子要继续学习swiper的有关知识了，哈哈哈，要不要一起啊。
之前已经更过两篇关于Swiper的博文了，关于Swiper我在主页设置了一个专栏，需要的小伙伴们，可以去看看啊。Swiper专栏
好了，我们今天学习的内容一共有两部分，很简单的内容，一起开始吧。

一、Free模式/抵抗模式

浅显理解

根据字面意思就是说，在轮播图滑动的过程中展示的效果。下面我们来具体看看：
（1）普通模式—freeMode

①参数默认为false，意为当slide滑动时只滑动一格，并且会自动切合wrapper
②参数如果设置为true，slide会根据滑动力度的惯性，且不会自动贴合。

false：

true：

（2）free模式动量—freeModeMomentum
需在freeMode模式下。

①参数默认为false，即为关闭动量，释放slide之后立即停止不会滑动
②参数设置为true，开启动量，释放slide后依旧会根据惯性继续滑动一段距离
false：

true：

（3）free模式动量值—freeModeMomentumRatio
参数类型为Number
设置的值越大，当释放slide时的惯性滑动距离越大。

二、Effects切换效果

Swiper的切换效果一共有fade淡出、cube投影、coverflow类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式、flip3D翻转效果。

<script language="javascript"> 
var mySwiper = new Swiper('#swiper-container1',{
effect : 'fade',
})
var mySwiper2 = new Swiper('#swiper-container2',{
effect : 'cube',
})
var mySwiper3 = new Swiper('#swiper-container3',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
})
var mySwiper4 = new Swiper('#swiper-container4',{
effect : 'flip',
})
</script>

下面一次展示一下它们的效果：
fade：

cube：

coverflow：

flip：