JS

首页 -  JS  -  Swiper参数说明(swiper参数配置)

Swiper参数说明(swiper参数配置)

Swiper参数说明(swiper参数配置)

1.自由模式与滑块容器(Free Mode and Scroll Container)

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明)
speednumber300600slides滑块动画之间的持续时间(单位ms)
eventTargetstring‘wrapper’‘container’swipers事件对象,默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用’container’. 2.4.2版本新增
autoplaynumber5000-过渡延迟时间(单位ms),参数没有指定的情况下,不生效,(补充:当用户操作后autoplay失效)
autoplayDisableOninteractionbooleantruefalse当设置为false时,用户操作之后(swipes,arrow以及pagination 点击)autoplay不会被禁掉,用户操作之后每次都会重新启动autoplay。
autoplayStopOnLastbooleanfalsetrue设置为false后autoplay在最后一个块下失效(在没有设置loop的情况下)
modestring‘horizontal’‘vertical’slides滑动方式,水平或垂直
loopbooleanfalsetruetrue 为loop模式生效
loopAdditionalSlidesnumber02loop模式下slides数量增加个数
loopedSlidesnumber12在loop模式下使用slidesPerview:’auto’,还需使用该参数设置所要用到的loop个数
slidesPerViewnumber

or ‘auto’

14旋转模式下,设置slider’s容器能够同时显示的slides数量。另外,支持’auto’值,会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式
slidesPerViewFitbooleantruefalse仅当已设置了slidesPerView:’auto’,以及当slides的宽度大于容器,该参数生效。默认为true然后宽度大的slide 过渡时会划分为边缘的两部分。为false时,slide transition 会划分为比容器container大的多个slides
slidesPerGroupnumber12定义slides的数量多少为一组,在旋转模式下有效。(carousel mode)
calculateHeightbooleanfalsetrue当值为true时,Swiper根据slides内容计算容器高度。响应式布局中或不知道slides高度时十分有用(就像响应式的图片)
roundLengthsbooleanfalsetrue值为true时,Swiper会四舍五入宽度和高度,在响应式的滑块中包含误差时十分有用。
cssWidthAndHeightbooleanfalsetrue值为true以及Swiper中的container,wrapper和slides没有高度
updateFormElementsbooleantruefalse当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化。
watchActiveIndexbooleanfalsetrue如果启用触屏事件期间会重新动态计算活动块的索引。
visiblilityFullfitbooleanfalsetrue如果启用,仅有“可视”的slides会最后适应容器的大小
autoResizebooleantruefalse值为false时,窗口尺寸改变时,禁掉slides自适应
DOManimationbooleantruefalse在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画
resistanceboolean or “100%”truefalse值为false时禁用resistant bounds(抵抗反弹),设置为‘100%’时启用resistant(抵抗)模式
noSwipingbooleanfalsetrue值为true时,当swiper新增类”noSwipingClass“的滑动块时,禁掉该元素的滑动。
preventLinksbooleantruefalse启用时当碰触滑块(slides)时禁止<a>标签链接
preventLinksPropagationbooleanfalsetrue如滑动过程中需要跟preventLinks一起禁用stopPropagation,设置值为true
initialSlidenumber20初始块(页面)的索引
useCSS3Transformsbooleantruefalse值为false时禁用css3 transforms(减少内存,提高性能,同时也降低了美观),同时使用wrapper的left/top属性代替。

2.自由模式与滑块容器(Free Mode and Scroll Container)

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
freeModebooleanfalsetrue若为真slide坐标不固定
freeModeFluidbooleanfalsetrue若为真,释放滑块之后仍会滑动一小会
scrollContainerbooleanfalsetrue设置为真时,让Swiper看上去像滑动区(scrollable area)
momentumRationumber12设置的值越大,当释放滑块时的动量距离越大
momentumBouncebooleantruefalsefalse时禁用自由模式下的(free mode)动量弹性
momentumBounceRationumber12值越大产生的动量弹性(momentum bounce)效果越明显

3.块(slides)偏移

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
centeredSlidesbooleanfalsetrue若为真,那么活动块会居中,而非默认状态下的居左
offsetPxBeforenumber0100指定slides与wrapper左边框的偏移量
offsetPxAfternumber0100指定slides与wrapper右边框的偏移量
offsetSlidesBeforenumber02滑块slides与wrapper左边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时,将十分有用。
offsetSlidesAfternumber02滑块slides与wrapper右边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时,将十分有用。

4.触屏/鼠标事件效应(Touch/mouse interactions )

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
touchRationumber10.8触屏比率
simulateTouchbooleantruefalsetrue,Swiper接受鼠标事件时与触屏事件相似。(单击以及拖曳滑块)
onlyExternalbooleanfalsetrue值为true时,只能使用扩展API函数内的swipeRight 或swiperLeft改变slides滑动,其他失效。正如例子里的tabs切换十分有用
followFingerbooleantruefalse值为false时,仅当你释放slide时才会滑动,当你用手指按住滑块它不会动。
grabCursorbooleanfalsetrue该选项给Swiper用户提供小小的贴心应用,值为true时,光标在Swiper上时成手掌状。
shortSwipesbooleantruefalse值为false时,禁用short swipes
longSwipesRatidnumber0.50.3Swiper 中到上/下滑块的触发率
moveStartThresholdnumberfalse100滑动的临界值,临界值单位为px,如果触屏距离小于该值滑块不会运动。

5.Navigation

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
keyboardControlbooleanfalsetrue值为true时,水平模式下,能使用键盘左右方向键滑动,垂直模式下能使用上下方向键滑动
mousewheelControlbooleanfalsetrue值为true时,能够使用鼠标滑轮滑动swiper
mousewheelControlForceToAxisbooleanfalsetrue值为真时,鼠标轮滑会改变轴向,所以水平模式下的鼠标滑轮只作用于水平鼠标滑块,垂直的作用于垂直模式。

5.Pagination(分页器)(指示器)

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
paginationstring or HTML Element-‘.my-pagination’css选择器中的分页。或者HTML元素内的分页元素
paginaClickablebooleanfalsetrue值为真时,当单击指示器时会执行过渡动画到目标slide
paginationAsRangebooleantrue为真时,跟可见块相关的指示器按钮会新增css类。当使用slidesPerview超过1时会十分有用。
createPaginationbooleantruefalse值为真时,Swiper会在slider内生成与slides数量相同的SPAN标签。所有这些生成的span标签都在pagination容器内。每一个span标签都有一个”swiper-pagination-switch“类名,活动的span(及当前slide下的)有一个为”swiper-active-switch’的类名,对于这些使用样式十分有用。

6.命名空间namespace

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
wrapperClassstring‘swiper-wrapper’‘my-wrapper’Swiper内wrapper的css类。具体查看上面的例子
slideClassstring‘swiper-slide’‘my-slide’Swiper内slide的css类名。具体查看上面的例子
slideActiveClassstring‘swiper-slide-active’‘my-active-slide’Swiper内活动块的css类名。。。
slideActiveClassstring‘swiper-slide-visible’‘my-visible-slide’Swiper内可视块的css类名。。。
slideElementstring‘div’‘li’使用单一滑块的标签
noSwipingClassstring‘swiper-no-swiping’‘stop-swiping’html元素使用的类名,当noSwiping参数设置为true时,用于禁止滑动
paginationElementstring‘span’‘div’使用唯一指示按钮的标签
paginatinElementClassstring‘swiper-pagination-switch’‘my-switch’使用多个指示按钮的类名
paginationActiveClassstring‘swiper-active-switch’‘my-active-switch’当前活动指示按钮的类名
paginationVisibleClassstring‘swiper-visible-switch’‘my-visible-switch’可见指示按钮的类名

7.回调函数(Callbacks)

Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明
queueStatCallbacksbooleanfalsetrue设置为true时,‘slideChangeStart’回调函数入队,所以在快速滑动过程中回调函数只被调用一次。
queueEndCallbacksbooleanfalsetrue设置为true时,‘slideChangeEnd’回调函数入队,所以在快速滑动结束后回调函数只被调用一次。
onFirstInitfunciton-function(swiper)

{

//执行代码

}

回调函数,首次初始化后马上执行
onInitfunction-function(swiper){

//执行代码

}

回调函数,在其他所有的初始化/再初始化后马上执行
onSwiperCreatedfunction-function(swiper){

//执行代码

}

回调函数,当Swiper初始化完成,loop,pagination,等其他参数或方法生成之后执行
onTouchStartfunction-function(swiper){

//执行代码

}

回调函数,当碰触到slider时马上执行
onTouchMovefunction-function(swiper){

//执行代码

}

回调函数,当碰触slider到释放期间执行。
onTouchEndfunction-function(swiper){

//执行代码

}

回调函数,当释放slider时执行
onSlideResetfunction-function(swiper){

//执行代码

}

回调函数,释放滑块之后,滑块将要滑到当前活动的slide时执行。freeMode模式下不生效。
onSlideChangeStartfunciton-function(swiper){

//执行代码

}

回调函数,当动画开始过渡到另一slide时执行,即动画开始时执行。freeMode模式下不生效。
onSlideChangeEndfunction-function(swiper){

//执行代码

}

回调函数,过渡动画结束后执行,即滑块活动停止后执行。freeMode模式下不生效。
onSlideNextfunction-function(swiper){

//执行代码

}

回调函数,与onSlideChangeStart相似,但该函数只能在滑向下一slide开始时生效
onSlidePrevfunciton-function(swiper){

//执行代码

}

回调函数,与onSlideChangeStart相似,但该函数只能在滑向上一slide开始时生效
onSlideTouchfunction-function(swiper){

//执行代码

}

回调函数,当触碰事件发生后生效。与onToucStart相似,不过该函数会返回.clickedSlide和.clickedSlideIndex的值
onImageReadyfunction-function(swiper){

//执行代码

}

回调函数,所有内置图像加载完成后执行,同时“updateOmImagesReady”需设置为“true’
onMomentumBouncefunction-function(swiper){

//执行代码

}

回调函数,执行于动量反弹(momentum bounce)过程中
onResistanceBeforefunciton-function(swiper,p){

//执行代码

}

回调函数,执行于negative resistance过程中。p-返回抵抗距离。
onResistanceAfterfunciton-function(swiper,p){

//执行代码

}

回调函数,执行于positive resistance过程中。p-返回抵抗距离。
onSetWrapperTransitionfunction-function(swiper,duration){

//执行代码

}

回调函数,每次当Swiper开始动画时执行
onSetWrapperTransformfunciton-function(swiper,transform){

//执行代码

}

回调函数,swiper的容器wrapper改变其坐标时执行。返回带当前transform 的偏移量的对象。


(1066)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读