Swiper学习之旅（3）-API(2)

2015-05-23

昨天讲解了部分API，今天继续讲一部分，估计接下来还有一篇。

grabCursor

设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）

scrollbar

Scrollbar容器的css选择器或HTML元素。scrollbar使用时需要需要配合html标签使用，在div中添加class标签

1	<div class="swiper-scrollbar"></div>

js中设置如下

1	scrollbar: '.swiper-scrollbar'

scrollbarHide

滚动条是否自动隐藏。默认：true，此时若是没有任何操作，滚动条会自动隐藏。

nextButton，prevButton

点击左右切换的按钮,使用时需要需要配合html标签使用，在div中添加class标签

1 2	<div class="swiper-button-next"></div> <div class="swiper-button-prev"></div>

js中设置如下

1 2	nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev'

effect

slide的切换效果，默认为slide（位移切换），可设置为fade（淡入），cube（方块），coverflow（3d流）。

fade效果参数。可选参数：crossFade
默认：false。关闭淡出。过渡时，原slide透明度为1（不淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。
可选值：true。开启淡出。过渡时，原slide透明度从1->0（淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。
1
2
3
4
effect : 'fade',
fade: {
  crossFade: false,
}

fade demo

cube效果参数，可选值：
slideShadows：开启slide阴影。默认 true。
shadow：开启投影。默认 true。
shadowOffset：投影距离。默认 20，单位px。
shadowScale：投影缩放比例。默认0.94。
1
2
3
4
5
6
7
effect : 'cube',
cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 100,
  shadowScale: 0.6
}

cube demo

coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：
rotate：slide做3d旋转时Y轴的旋转角度。默认50。
stretch：每个slide之间的拉伸值，越大slide靠得越紧。默认0。
depth：slide的位置深度。值越大z轴距离越远，看起来越小。默认100。
modifier：depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
slideShadows：开启slide阴影。默认 true。
1
2
3
4
5
6
7
8
9
effect : 'coverflow',
slidesPerView : 3,
coverflow: {
  rotate: 20,
  stretch: 40,
  depth: 300,
  modifier: 2,
  slideShadows : true
}

coverflow demo

keyboardControl

是否开启键盘控制Swiper切换。设置为true时，能使用键盘方向键控制slide滑动。

mousewheelControl

是否开启鼠标控制Swiper切换。设置为true时，能使用鼠标滑轮控制slide滑动。

autoplay

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

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

autoplayDisableOnInteraction

用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。