1、先引入swiper.min.css和swiper.min.js

2、结构样式

swiper-container,swiper-wrapper,swiper-slide

3/实例化

var myswiper=newswiper('.swiper-container');

4、如果一个页面有多个swiper，最好给每一个swiper单独写一个类名

5、属性

initialSlide参数 //设定初始化时slide的索引，也就是页面一进来的时候显示的第几个slide，默认0

direction 设置当前slide的滑动方向 默认是水平的 垂直是vertical

speed 设置切换速度，默认是300ms

on 注册事件 on:{

事件名称:function(){}

}

init属性 是否立即初始化，默认是true 布尔值

loop 无缝轮播 布尔值 默认是false

activeIndex 返回当前活动块的索引

realIndex loop模式下的当前活动块的索引

设置autoplay:true等同于

autoplay:{

delay:3000,

stopOnLastSlide:false,

disableOninteraction:true

}

6、方法

init（） 来初始化swiper实例

slideTo(index,speed,runcallbacks) 必选index

7、回调函数

slideChangeTransitionStart

slideChangeTransitionEnd

8、分页器

跟wrapper同级

在配置项里添加

pagination:{

el:'分页器名',

clickable;true,//点击分页器的时候，实现切换

type:bullets（默认是原点）

//fraction 分式，progressbar进度条 custom自定义

renderBullet：function(){

return '<span class="'

}

}

9、前进后退

navigation 跟wrapper同级

配置项里面

nacigation：{

nextEl：‘右箭头’，

prevEl：‘左箭头’

}

10、滚动条

跟wrapper同级的

draggable：true 拖拽滚动条的时候允许拖动滚动条