如何运用swiper

<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 追加,看起来像无缝轮播

时间: 07-23