程序员经验分享-hwhale

Swiper参数说明（swiper参数配置）

2023-11-06

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 false 值为false时，窗口尺寸改变时，禁掉slides自适应
DOManimation boolean true false 在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画
resistance boolean or “100%” true false 值为false时禁用resistant bounds（抵抗反弹）,设置为‘100%’时启用resistant（抵抗）模式
noSwiping boolean false true 值为true时，当swiper新增类”noSwipingClass“的滑动块时，禁掉该元素的滑动。
preventLinks boolean true false 启用时当碰触滑块（slides）时禁止<a>标签链接
preventLinksPropagation boolean false true 如滑动过程中需要跟preventLinks一起禁用stopPropagation，设置值为true
initialSlide number 2 0 初始块（页面）的索引
useCSS3Transforms boolean true false 值为false时禁用css3 transforms（减少内存，提高性能，同时也降低了美观）,同时使用wrapper的left/top属性代替。

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

Parameter（参数） Type(类型) Default Value（默认值 Example（例子） Description（说明
freeMode boolean false true 若为真slide坐标不固定
freeModeFluid boolean false true 若为真，释放滑块之后仍会滑动一小会
scrollContainer boolean false true 设置为真时，让Swiper看上去像滑动区（scrollable area）
momentumRatio number 1 2 设置的值越大，当释放滑块时的动量距离越大
momentumBounce boolean true false false时禁用自由模式下的（free mode）动量弹性
momentumBounceRatio number 1 2 值越大产生的动量弹性（momentum bounce）效果越明显

3.块（slides）偏移

Parameter（参数） Type(类型) Default Value（默认值 Example（例子） Description（说明
centeredSlides boolean false true 若为真，那么活动块会居中，而非默认状态下的居左
offsetPxBefore number 0 100 指定slides与wrapper左边框的偏移量
offsetPxAfter number 0 100 指定slides与wrapper右边框的偏移量
offsetSlidesBefore number 0 2 滑块slides与wrapper左边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。
offsetSlidesAfter number 0 2 滑块slides与wrapper右边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。

4.触屏/鼠标事件效应（Touch/mouse interactions ）

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

5.Navigation

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

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

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

6.命名空间namespace

Parameter（参数） Type(类型) Default Value（默认值 Example（例子） Description（说明
wrapperClass string ‘swiper-wrapper’ ‘my-wrapper’ Swiper内wrapper的css类。具体查看上面的例子
slideClass string ‘swiper-slide’ ‘my-slide’ Swiper内slide的css类名。具体查看上面的例子
slideActiveClass string ‘swiper-slide-active’ ‘my-active-slide’ Swiper内活动块的css类名。。。
slideActiveClass string ‘swiper-slide-visible’ ‘my-visible-slide’ Swiper内可视块的css类名。。。
slideElement string ‘div’ ‘li’ 使用单一滑块的标签
noSwipingClass string ‘swiper-no-swiping’ ‘stop-swiping’ html元素使用的类名，当noSwiping参数设置为true时，用于禁止滑动
paginationElement string ‘span’ ‘div’ 使用唯一指示按钮的标签
paginatinElementClass string ‘swiper-pagination-switch’ ‘my-switch’ 使用多个指示按钮的类名
paginationActiveClass string ‘swiper-active-switch’ ‘my-active-switch’ 当前活动指示按钮的类名
paginationVisibleClass string ‘swiper-visible-switch’ ‘my-visible-switch’ 可见指示按钮的类名

7.回调函数（Callbacks）

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

{

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

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

//执行代码

}

 回调函数，swiper的容器wrapper改变其坐标时执行。返回带当前transform 的偏移量的对象。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

swiperjs

Swiper参数说明（swiper参数配置） 的相关文章

随机推荐

  • 【华为OD机试真题 python】 字符串比较【2022 Q4

    前言 华为OD笔试真题 python 专栏含华为OD机试真题 华为面试题 牛客网华为专栏真题 如果您正在准备华为的面试 或者华为od的机会 有任何想了解的可以私信我进行交流 我会尽可能的给一些建议 和帮您解答 PS 文中答案仅供参考 不能照

  • Visio图片加全边框

    Visio插入图片 想给每一个图都加边框 一个方法是画矩形框 如果是很多图片的话很麻烦 另一个方法 选中图片 然后选 线条 但是发现只围一半 调整线条宽度 欧了

  • 转：Oracle RAC：生产环境下的搭建过程

    原帖 http tech it168 com a2012 0928 1404 000001404498 shtml Oracle RAC 生产环境下的搭建过程 2012年09月29日00 05 it168网站原创 作者 刘炳林 编辑 王玉圆

  • python语言控制结构是指_python程序的三种控制结构

    程序的三种控制结构 什么是控制结构 程序有三种基本结构组成 顺序结构 分支结构 循环结构 任何程序都是由这三种基本结构组成 顺序结构是程序按照线性顺序依次执行的一种运行方式 分支结构是程序根据条件判断结果而选择不同向前执行路径的一种运行方式

  • vue3 子组件向父组件传递参数

    1 父传子 父组件 在子组件上通过 v bind绑定属性 子组件 先定义下基本类型 然后通过setup的第一个参数取获取传过来的值 2 子传父 父组件 在子组件上绑定一个事件 并定义回调 子组件 通过setup的第二个参数去接受 第二个参数

  • 【Qt学习】08：文件读写操作

    OVERVIEW 文件读写操作 一 文件操作 1 QFile 2 QFileInfo 二 二进制文件读写 三 文本文件读写 文件读写操作 文件操作是应用程序必不可少的部分 Qt 作为一个通用开发库提供了跨平台的文件操作能力 Qt 通过QIO

  • 重试实现高可用方案

    typora copy images to img 重试实现高可用一览 1 背景介绍 随着互联网的发展项目中的业务功能越来越复杂 有一些基础服务我们不可避免的会去调用一些第三方的接口或者公司内其他项目中提供的服务 但是远程服务的健壮性和网络

  • 快速入手SpringMVC 之 JSR303与拦截器

    目录 一 JSR303 简介 导入所需依赖 pom依赖 后台 实体类 前端界面 实现结果 JSR303服务端总结 二 拦截器 1 什么是拦截器 2 拦截器与过滤器 2 1 什么是过滤器 Filter 2 2 拦截器与过滤器的区别 3 应用场

  • 三角函数和反三角函数的图形

    三角函数和反三角函数的图形 三角函数和反三角函数的图形 三角函数 反三角函数 三角函数和反三角函数的图形 三角函数 反三角函数

  • 搭建OpenWrt开发环境（包括编译过程）

    转 搭建OpenWrt开发环境 包括编译过程 OpenWrt是一个高度模块化 高度自动化的嵌入式linux发行版 其编译和安装过程比普通的linux发行版而言 要简单太多了 如果您是新手 您那恐惧的心大可放到肚子里 呵呵 对于新手来说最麻烦

  • DOM0 DOM2、DOM3详细介绍与区别

    1 定义 1 1 0级DOM DOM0 0级 DOM 分为2个 一是在标签内写onclick事件 二是在JS写onlicke function 函数 1

  • rabbitmq如何保证消息不丢失_RabbitMQ如何保证不丢数据？Spring Boot实现confirm机制...

    点关注 不迷路 持续更新Java相关技术及资讯 1 原理图 消息确认 说明 ACK是默认是自动 在消息发送给消费者后立即确认 所以若消费端消费业务逻辑抛出异常 会可能丢失消息 即便加入事务回滚了也只保证数据的一致性 而消息依然丢失 所以 若

  • Ubuntu18.04日常踩坑：桌面卡死解决

    方法更新2019 4 11 环境 Ubuntu18 04 发现Ubuntu18 04LTS的桌面经常被卡死 操作毫无反应 此时电脑的内存已经饱满 交换区也已经饱满 等待电脑反应过来 能给你一次关闭进程刷新页面的机会几乎是不存在的 而且此时想

  • 【Flutter 1-7】Flutter教程Dart语言——变量

    作者 弗拉德 来源 弗拉德 公众号 fulade me 2011年10月10日的GOTO大会上 谷歌的两位工程师发布了 Dart Dart是一种全新的编程语言 旨在帮助开发者构建Web应用程序 Dart 1 0于2013年11月14日发布

  • FreeBSD ssh配置

    freebsd ssh配置 2011 08 22 15 35 32 分类 系统运维 freebsd 默认是不允许ssh登录的 说以说要设置一下 我的版本是8 2的从网上的一个博客中获得了信息然后成功了 http likuan4168 blo

  • K8s pod 应用

    个人学习笔记 如有问题欢迎交流 文章编排和格式等问题见谅 1 编写 pod yaml 文件 pod 是 kubernetes 中最小的编排单位 一个 pod 里包含一个或多个容器 apiVersion v1 指定api版本 kind Pod

  • 数据可视化——简单图形绘制（饼图，柱状图，直方图，散点图，箱线图，折线图）

    各种图形的label参数都与plt legend函数配合使用 import pandas as pd import numpy as np import matplotlib pyplot as plt 更改文件存放提取路径 import

  • pjsip视频通信开发(底层实现)之用户注册

    一 PJSIP简介 对于pjsip的介绍可以看http www cnblogs com my life articles 2175462 html 文章 里面详细介绍了它的组成框架以及各部份的组成介绍 我把官网中提供的一个pjsip的整体框

  • angularJs 一些API

    angular bind 返回一个调用self的函数fn self代表fn里的this 可以给fn提供参数args 这个功能也被称为局部操作 以区别功能 格式 angular bind self fn args self object 对象

  • Swiper参数说明（swiper参数配置）

    1 自由模式与滑块容器 Free Mode and Scroll Container Parameter 参数 Type 类型 Default Value 默认值 Example 例子 Description 说明 speed number

热门标签