Swiper基本结构

名词解释

名词	翻译	描述
Swiper	滑动、切换	整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程
container	容器	Swiper的容器，里面包括滑动块（slide）的集合（wrapper)、分页器(pagination)、前进按钮等
wrapper	包含	触控的对象，可触摸区域，移动的块的集合
slider	滑块	切换的块中的一个，可以是一段文字、一张图片或者一段html代码
pagination	分页	指示slide的数量和当前活动的slide
active	活动的，激活的	默认可视区域内最左边的slide是活动的，其他的是非活动的
callback	回调函数	在某些情况下触发

Swiper初始化

new Swiper(container,options)

用于初始化一个Swiper。
container : 必选，要求string类型，Swiper容器的css选择器，例如“.swiper-container”。
options : 可选

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
loop : true,//可选选项，开启循环
})
</script>

Basic(Swiper基础选项)

autoplay

自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
用户操作后autoplay停止

使用方法示例

<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,
}


//反方向自动切换简单示例
var mySwiper = new Swiper('.swiper-container',{
loop : true,
})
setInterval("mySwiper.swipePrev()", 2000);
</script>

speed

滑动速度，即slider自动滑动开始到结束的时间（单位ms）。

使用方法示例

<script> 
var mySwiper = new Swiper('.swiper-container',{
autoplay : 3000,
speed:300,
})
</script>

eventTarget

默认状态下所有的触控事件只能用于wrapper。设定为 'container' 则其他包含在container内的元素也可触控。

使用方法示例

<div class="swiper-container">
	<div>
		我是一个在container和wrapper之间的块，我可以swiper。</div>
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">
			slider1</div>
		<div class="swiper-slide red-slide">
			slider2</div>
		<div class="swiper-slide orange-slide">
			slider3</div>
	</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
eventTarget : 'container',
})
</script>

mode

滑动方向，可设置水平(horizontal)或垂直(vertical)。

使用方法示例

<script> 
var mySwiper = new Swiper('.swiper-container',{
mode : 'vertical',
})
</script>

loop

设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。

使用方法示例

<script> 
var mySwiper = new Swiper('.swiper-container',{
loop : true,
})
</script>