目录
1.自由模式与滑块容器(Free Mode and Scroll Container)
2.自由模式与滑块容器(Free Mode and Scroll Container)
4.触屏/鼠标事件效应(Touch/mouse interactions )
Swiper参数说明(swiper参数配置)
1.自由模式与滑块容器(Free Mode and Scroll Container)
Parameter(参数) | Type(类型) | Default Value(默认值 | Example(例子) | Description(说明) |
speed | number | 300 | 600 | slides滑块动画之间的持续时间(单位ms) |
eventTarget | string | ‘wrapper’ | ‘container’ | swipers事件对象,默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用’container’. 2.4.2版本新增 |
autoplay | number | 5000 | - | 过渡延迟时间(单位ms),参数没有指定的情况下,不生效,(补充:当用户操作后autoplay失效) |
autoplayDisableOninteraction | boolean | true | false | 当设置为false时,用户操作之后(swipes,arrow以及pagination 点击)autoplay不会被禁掉,用户操作之后每次都会重新启动autoplay。 |
autoplayStopOnLast | boolean | false | true | 设置为false后autoplay在最后一个块下失效(在没有设置loop的情况下) |
mode | string | ‘horizontal’ | ‘vertical’ | slides滑动方式,水平或垂直 |
loop | boolean | false | true | true 为loop模式生效 |
loopAdditionalSlides | number | 0 | 2 | loop模式下slides数量增加个数 |
loopedSlides | number | 1 | 2 | 在loop模式下使用slidesPerview:’auto’,还需使用该参数设置所要用到的loop个数 |
slidesPerView | number or ‘auto’ |
1 | 4 | 旋转模式下,设置slider’s容器能够同时显示的slides数量。另外,支持’auto’值,会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式 |
slidesPerViewFit | boolean | true | false | 仅当已设置了slidesPerView:’auto’,以及当slides的宽度大于容器,该参数生效。默认为true然后宽度大的slide 过渡时会划分为边缘的两部分。为false时,slide transition 会划分为比容器container大的多个slides |
slidesPerGroup | number | 1 | 2 | 定义slides的数量多少为一组,在旋转模式下有效。(carousel mode) |
calculateHeight | boolean | false | true | 当值为true时,Swiper根据slides内容计算容器高度。响应式布局中或不知道slides高度时十分有用(就像响应式的图片) |
roundLengths | boolean | false | true | 值为true时,Swiper会四舍五入宽度和高度,在响应式的滑块中包含误差时十分有用。 |
cssWidthAndHeight | boolean | false | true | 值为true以及Swiper中的container,wrapper和slides没有高度 |
updateFormElements | boolean | true | false | 当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化。 |
watchActiveIndex | boolean | false | true | 如果启用触屏事件期间会重新动态计算活动块的索引。 |
visiblilityFullfit | boolean | false | true | 如果启用,仅有“可视”的slides会最后适应容器的大小 |
autoResize | boolean | true |