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

本文详细介绍了Swiper的参数配置,包括自由模式与滑块容器的设置、slides偏移调整、触屏和鼠标交互效果、导航和分页器的使用,以及命名空间和回调函数的应用。
摘要由CSDN通过智能技术生成

目录

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

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

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

3.块(slides)偏移

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

5.Navigation

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

6.命名空间namespace

7.回调函数(Callbacks)


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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dengrz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值