Swiper 参数说明
参考http://www.xiaoshu168.com/jquery/103.html
Swiper 初始化 支持下列中的参数
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属性代替。 |
自由模式与滑块容器(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)效果越明显 |
块(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宽度时,将十分有用。 |
触屏/鼠标事件效应(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,如果触屏距离小于该值滑块不会运动。 |
Navigation
Parameter(参数) | Type(类型) | Default Value(默认值 | Example(例子) | Description(说明 |
keyboardControl | boolean | false | true | 值为true时,水平模式下,能使用键盘左右方向键滑动,垂直模式下能使用上下方向键滑动 |
mousewheelControl | boolean | false | true | 值为true时,能够使用鼠标滑轮滑动swiper |
mousewheelControlForceToAxis | boolean | false | true | 值为真时,鼠标轮滑会改变轴向,所以水平模式下的鼠标滑轮只作用于水平鼠标滑块,垂直的作用于垂直模式。 |
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’的类名,对于这些使用样式十分有用。 |
命名空间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’ | 可见指示按钮的类名 |
回调函数(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 的偏移量的对象。 |
参考http://www.xiaoshu168.com/jquery/103.html
Swiper 参数说明相关推荐
- vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
- VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程 下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件 安装扩展插 ...
- ionic4中使用Swiper触屏滑动--技术
这个demo只有HTML的内容,但我要在ionic4上使用,所以就把它修改后用在ionic上! 原文件 <!DOCTYPE html> <html lang="en&quo ...
- ionic4中使用Swiper触屏滑动---心酸路
心酸历程: 积分首页的轮播图,我想做得好一点,按照小谷给的原型图,找到了很不多的实例. 但是实现的过程遇到了很多问题,同时也学到了很多! 2019-7-9: 找人弄源码,想通过上次那样,在网页上找到类 ...
- arcgis合并tif影像_微图影像地图导出拼接大图的参数说明
1. 概述 微图是一款集地图下载与GIS功能于一体的轻量级GIS产品,相较于X3版本的万能地图下载器,它有更丰富的地图数据和更专业的GIS功能. 尽管微图的软件界面已经足够简洁明了,但为了让新用户能更 ...
- dbcp 连接池参数说明
dbcp 连接池参数说明 参考: http://commons.apache.org/proper/commons-dbcp/configuration.html https://www.cnblog ...
- 微信小程序swiper组件宽高自适应方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话请改成 wid ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 从头到尾使用Geth的说明-3-geth参数说明和环境配置
1.参数说明 ETHEREUM选项:--config value TOML 配置文件--datadir "/home/user4/.ethereum" 数据库和keystore密钥 ...
- ps aux参数说明
运行 ps aux 的到如下信息: ps aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND smmsp ...
最新文章
- 禁止解析某目录的php,限制访问user_agent,php相关配置
- 让Jexus支持高并发请求的优化技巧
- OpenCV直方图计算Histogram Calculation
- linux中的umask 函数
- 使用Github(目的、基本你概念、注册账号)
- XposedNoRebootModuleSample 不需要频繁重启调试的Xposed 模块源码例子
- 【译】2021年国外十大AI自动写作软件评测
- c语言测试单句代码运行时间,c语言测试代码的运行时间
- 技术能力和工作能力的联系和区别
- 推荐10 个短小却超实用的 JavaScript 代码段
- LBS服务LevelUp推二维码支付产品
- 外贸企业如何选ERP管理软件
- uniApp和微信小程序好看的我的页面(有源码)
- 用PXE方法从裸机批量推Oracle 11gR2 RAC环境
- 读书: 枪炮、病菌与钢铁
- c++ memcpy内存拷贝
- rockchip rk3566 android11 网口log报错: DMA engine initialization failed
- 日本下一个超大规模数据中心破土动工,位于京阪奈科学城
- 一种可以复制钟表零件的石膏模具
- ffmpeg 提取 视频,音频,字幕 方法