vue-awesome-swiper的API整理

参数	类型（swiper3）	默认值（swiper3）	类型（swiper4）	默认值（swiper4）	说明
autoplay	Number/Boolean	0/false	Object	autoplay	自动切换
speed	Number	300	Number	300	切换速度
loop	Boolean	false	Boolean	false	loop模式
loopAdditionalSlides	Number	0	Number	0	loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
loopedSlides	Number	1	Number	1	在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
direction	String	horizontal	String	horizontal	Slides的滑动方向
autoplayDisableOnInteraction	Boolean	true	-	-	用户操作swiper之后，是否禁止autoplay
autoplayStopOnLast	Boolean	true	-	-	切换到最后一个slide时停止自动切换
grabCursor	Boolean	false	Boolean	false	鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
width	Number	-	Number	-	强制Swiper的宽度
height	Number	-	Number	-	强制Swiper的高度
autoHeight	Boolean	false	Boolean	false	自动高度
freeMode:					swiper3/4 api相同
freeMode	Boolean	false	-	-	free模式，slide会根据惯性滑动且不会贴合
freeModeMomentum	Boolean	true	-	-	free模式动量。若设置为false则关闭动量，释放slide之后立即停止不会滑动。
freeModeMomentumRatio	Number	1	-	-	free模式动量值（移动惯量）
freeModeMomentumVelocityRatio	Number	1	-	-	动量反弹
freeModeMomentumBounce	Boolean	true	-	-	Slides的滑动方向
freeModeMomentumBounceRatio	Number	1	-	-	值越大产生的边界反弹效果越明显，反弹距离越大。
freeModeSticky	Boolean	false	-	-	使得freeMode也能自动贴合。
effect:					swiper3/4 api相同
effect	String	slide	-	-	slide的切换效果。
fade/fadeEffect(4)	Object	fade	-	-	fade效果参数。
cube/cubeEffect	Object	cube	-	-	cube效果参数。
coverflow/coverflowEffect	Object	coverflow	-	-	coverflow效果参数。
flip/flipEffect	Object	flip	-	-	flip效果参数。
Zoom:
zoom	Boolean	false	Object	zoom	焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
zoomMax	Number	3	-	-	最大缩放焦距（放大倍率）.
zoomMin	Number	1	-	-	最小缩放焦距（缩小倍率）。
zoomToggle	Boolean	true	-	-	设置为false，不允许双击缩放，只允许手机端触摸缩放。
pagination:
pagination	String	-	Object	pagination	分页器容器的css选择器或HTML标签
paginationType	String	-	-	-	bullets’ 圆点（默认）‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
paginationClickable	Boolean	false	-	-	点击分页器的指示点分页器控制Swiper切换
paginationHide	Boolean	false	-	-	默认分页器会一直显示
paginationElement	String	span	-	-	设定分页器指示器（小点）的HTML标签。
Navigation Buttons:				swiper4 navigation
nextButton	string / HTMLElement	-	-	-	前进按钮的css选择器或HTML元素。
prevtButton	string / HTMLElement	-	-	-	后退按钮的css选择器或HTML元素。
Scrollbar:
scrollbar	string / HTMLElement	-	Object	swiper4 Scrollbar	Scrollbar容器的css选择器或HTML元素
scrollbarHide	Bolean	true	-	-	滚动条是否自动隐藏。
scrollbarDraggable	Boolean	false	-	-	该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease	Boolean	false	-	-	如果设置为true，释放滚动条时slide自动贴合。

autoplay:

autoplay: {
   delay: 3000, // 自动切换的时间间隔，单位ms
   stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
   stopOnLastSlide: true, // 如果设置为true，当切换到最后一个slide时停止自动切换。
   disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay。
   reverseDirection: true, // 开启反向自动轮播。
   waitForTransition: true // 等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
 },

fade:

fadeEffect: {
   crossFade: false
 }

cube:

cubeEffect: {
   slideShadows: true, // 开启slide阴影。默认 true。
   shadow: true, // 开启投影。默认 true。
   shadowOffset: 100, // 投影距离。默认 20，单位px。
   shadowScale: 0.6 // 投影缩放比例。默认0.94。
 },

coverflow:

coverflowEffect: {
   rotate: 30, // slide做3d旋转时Y轴的旋转角度。默认50。
   stretch: 10, // 每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
   depth: 60, // slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
   modifier: 2, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
   slideShadows : true // 开启slide阴影。默认 true。
 },

flip:

flipEffect: {
   slideShadows : true, // slides的阴影。默认true。
   limitRotation : true // 限制最大旋转角度为180度，默认true。
 }

zoom:

zoom: {
   maxRatio: 5, // 最大倍数
   minRatio: 2, // 最小倍数
   toggle: false, // 不允许双击缩放，只允许手机端触摸缩放。
   containerClass: 'my-zoom-container' // zoom container 类名
 },

pagination:

pagination: {
   el: '.swiper-pagination',
   type: 'bullets',
   // type: 'fraction',
   // type : 'progressbar',
   // type : 'custom',
   progressbarOpposite: true, // 使进度条分页器与Swiper的direction参数相反
   bulletElement : 'li', // 设定分页器指示器（小点）的HTML标签。
   dynamicBullets: true,  // 动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
   dynamicMainBullets: 2, // 动态分页器的主指示点的数量
   hideOnClick: true, // 默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
   clickable: true // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
 },

navigation:

navigation: {
   nextEl: '.swiper-button-next', // 前进按钮的css选择器或HTML元素。
   prevEl: '.swiper-button-prev', // 后退按钮的css选择器或HTML元素。
   hideOnClick: true, // 点击slide时显示/隐藏按钮
   disabledClass: 'my-button-disabled', // 前进后退按钮不可用时的类名。
   hiddenClass: 'my-button-hidden' // 按钮隐藏时的Class
 },

Scrollbar:

scrollbar: {
   el: '.swiper-scrollbar',
   hide: true, // 滚动条是否自动隐藏。默认：false，不会自动隐藏。
   draggable: true, // 该参数设置为true时允许拖动滚动条。
   snapOnRelease: true, // 如果设置为false，释放滚动条时slide不会自动贴合。
   dragSize: 30 // 设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。
 },