html 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)时禁止标签链接

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.NavigationParameter(参数)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.命名空间namespaceParameter(参数)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 的偏移量的对象。