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

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 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 的偏移量的对象。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
网上对于select option 动态添加修改如下, $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery