如何运用swiper

标签：play   var   enter   ini   slides   change   observer   如何   wip   

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>

var mySwiper = new Swiper(".swiper-container",{

})

函数【可用作属性使用】：
onSlideChangeEnd(swiper):function(){...} 从一个slide过渡到另一个slide结束时执行
onSliderMove(swiper, event):function(){...} 手指触碰Swiper并拖动slide时执行。

常用： 直接使用，函数中使用fun(sw){ sw.activeIndex }
mySwiper.activeIndex： 返回当前活动块的索引
mySwiper.initialSlide 初始化索引

属性：
slidesPerView: 显示数量
spaceBetween： 间距
centeredSlides：true 活动块居中
freeMode： 自动贴合【false:贴合 true：不贴合】

slideToClickedSlide： 点击跳到点击时的slide
slidesOffsetBefore： 距离左边框偏移量
slidesOffsetAfter： 距离右边框偏移量
direction： 滑动方向，水平【horizontal】或垂直【vertical】
speed： 滑动速度，触摸滑动时释放至贴合的时间【单位：ms】
autoplay： 自动切换的时间间隔【单位ms】，不设定该参数slide不会自动切换
observer：true 实时监听slide被修改
threshold：【单位px】 当拖动小于时，不会被拖动
loop：true 追加，看起来像无缝轮播
autoHeight：true 自动撑开高度，整体高度改变

轮播、选项卡
paginationClickable:true 点击分页器的指示点分页器会控制Swiper切换
pagination:"指示点容器" 显示指示点【指示点容器可以在swiper容器外】
loop：true 追加，看起来像无缝轮播

如何运用swiper

标签：play   var   enter   ini   slides   change   observer   如何   wip   

原文地址：http://www.cnblogs.com/zl55/p/7236304.html