swiper.js——一般属性、进度属性

一般属性

》direction：horizontal(默认)/vertical（垂直滑动）//slide滑动方向

》loop：true（默认）/false //可选选项，是否循环

》autoplay：具体时间ms//可选选项，自动滑动，其中实现反向自动滑动

setInterval("mySwiper.slidePrev()", 1000);

 

》autoplayDisableOnInteraction:true(默认)/false//用户操作（包括触碰，拖动，点击pagination等）swiper时，是否停止自动播放

》speed：具体时间ms//slider从开始到结束滑动的时间

》initialSlide：//初始化时slide的索引

》grapCursor：//鼠标经过swiper时变成手状，

 

》hashnav：//类似锚点的功能，配合data-hash使用，当切换页面是url会带上data-hash里的值，可用于切换时初始化显示指定的页面

 

 

 

》parallax：true/false(默认)//开启视觉查效果，配合data-swiper-parallax（也可通过data-swiper-parallax-x或data-swiper-parallx-y单独设），data-swiper-parallax-duration(背景移动经历的时间，默认为speed)使用

 

 1. 对于swiper-container的子元素，视差效果：背景随之移动

 

 

2、对于slides的子元素，视差效果：背景不动，文字移动

 

》setWrapperSize：true/false(默认)//开启这个设定会在Wrapper上添加等于slides相加的宽高，作用是兼容不支持flexbox布局的浏览器

》virtualTranslate：true/false(默认)//swiper除了不会移动外其他和平常都一样，设置后可以自己定义slide的 移动效果。启用这个选项时onSlideChange和onTransition事件失效。

》width(height):具体值//强制Swiper的宽度，当你的Swiper在隐藏状态下初始化时才用得上。这个参数会使自适应失效。其中width: window.innerWidth，height : window.innerHeight表设为全屏高宽

》roungLength:true/false(默认)//设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字模糊。

》slideOffsetBefore（slideOffsetAfter）:具体数字//设定slide与左边框（右边框）的预设偏移量（单位px）

 

进度属性

》watchSlideProgress:true/false(默认)//开启这个参数来计算每个slide的progress(进度)，Swiper的progress无需设置即开启，一般与watchSlidesVisibility搭配使用

》watchSlideVisibility:true/false(默认)//如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible'。