Swiper Usage&&API
2020-12-13 02:08
Usage:
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper‘s CSS and JS:
....
....
其中引用的文件名以下载的为准。
3、使用下面的HTML布局
div class="swiper-container">
4、打开下载的文件中的idangerous.swiper.css，设置Swiper‘s的宽度以及高度（在文件的末尾）
/* 指定swiper 容器尺寸: */
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
5、初始化Swiper 在文档开始处，（或在窗口加载时）
/*======
使用文档添加事件或窗口加载事件
例如:
window.onload = function() { ...代码 ...}
或者document.addEventListener(‘DOMContentLoaded‘, function(){ ...代码... }, false)
=======*/
window.onload = function() {
var mySwiper = new Swiper(‘.swiper-container‘,{
//添加需要的选项:
mode:‘horizontal‘,
loop: true
//等等..
});
}
})
API:
new Swiper（container,options）
container: 字符串要求，Swiper‘s容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;
options:-对象，可选择的。Swiper参数，详情见下：
用法：
var mySwiper = new Swiper(".swiper-container",{
speed:750,
mode:"vertical"
})
返回拥有众多有用函数（functions）以及方法(methods)的对象:
·mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮（mousewheel control）控制
·mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮
·mySwiper.enableKeyboardControl()-滑动中键盘控制可用
·mySwiper.disableKeyboardControl()-禁用滑动中键盘控制
·mySwiper.swipeNext()-执行过渡动画到下一滑块（slide）(简单来说就是滑动到下一个页面)
·mySwiper.swipePrev()-执行过渡动画到上一滑块
·mySwiper.swipeTo(index,speed,runCallbacks) - 执行过渡到索引下标数字等于传入参数“index”的页面（slide）处，速度为传入的参数“speed”。同时可将“runCallbacks”设置为false（默认为“true”），那么transition（过渡）不会产生onSlideChange回调函数。
·mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10
·mySwiper.browser.is8 -返回 “true”如果浏览器为IE8
·mySwiper.support.touch -返回 “true”如果浏览器支持触屏
·mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形)
·mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形)
·mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡)
·mySwiper.activeSlide() - 返回当前活动块（slide）（slide 实例，HTML元素）
·mySwiper.clickedSlideIndex - 返回触控/点击块（slide）的索引（数字）。只适用于“onSlideTouch”和“onSlideClick”
回调函数中。
·mySwiper.clickedSlide - 返回触控/点击块（slide）（slide实例，HTML元素）。只适于“onSlideTouch”和“onSlideClick”
回调函数中。
·mySwiper.activeIndex- 返回当前活动块的索引（number）
·mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引（number）
·mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引（number）
·mySwiper.previousIndex- 返回上一个活动块的索引（number）
·mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮
·mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮
·mySwiper.destroy(removeResizeEvent) -移除所有绑定的事件监听（窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】，容器（wrapper）的触控事件，以及文档的鼠标事件），对于添加/移除滑块，页面到文档时非常有用，能够释放浏览器内存。
·mySwiper.resizeFix()-调用这个方法当你改变swiper‘s 的尺寸而没有改变窗口大小时。
·mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。
·mySwiper.width 返回Swiper容器的宽度
·mySwiper.height返回Swiper容器的高度
·mySwiper.isTouched 返回布尔值，当触控该slide时返回“true”
·mySwiper.positions - 返回包含x,y坐标的wrapper对象
·mySwiper.touches - 返回包含触控信息的对象数组
·mySwiper.params - 获取对象初始化参数，能够在初始化之后改变/重写该参数，如：
mySwiper.params.speed = 500;
·mySwiper.getWrapperTranslate(axis)-返回当前容器“位移（translate）"【css3 transform ->translate】,即x,或y轴的偏移量。”axis“-参数为字符串”x“或”y“,对应于水平模式及垂直模式。
·mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform‘s translate 的值。x,y and z -为数字
·mySwiper.wrapperTransitionEnd(callback,permanent) - 使用该方法当Swiper ”transitionEnd“事件触发后能够自定义回调函数（在swipeNext,swipePrev,swipeTo 以及swipeReset 函数之后）:
callback-函数（function）。默认状态下（如果permanent 值为false）transitions只执行一次
permanent - boolean . 默认状态下为false，当设置为真时该回调函数callback会执行多次。
选项（options）
Swiper 初始化 支持下列中的参数
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明） |
|
speed |
300 |
600 |
slides滑块动画之间的持续时间（单位ms） |
|
eventTarget |
‘wrapper‘ |
‘container‘ |
swipers事件对象，默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用‘container‘. 2.4.2版本新增 |
|
autoplay |
5000 |
- |
过渡延迟时间（单位ms），参数没有指定的情况下，不生效，（补充：当用户操作后autoplay失效） |
|
autoplayDisableOninteraction |
true |
false |
当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。 |
|
autoplayStopOnLast |
false |
true |
设置为false后autoplay在最后一个块下失效（在没有设置loop的情况下） |
|
mode |
‘horizontal‘ |
‘vertical‘ |
slides滑动方式，水平或垂直 |
|
loop |
false |
true |
true 为loop模式生效 |
|
loopAdditionalSlides |
0 |
2 |
loop模式下slides数量增加个数 |
|
loopedSlides |
1 |
2 |
在loop模式下使用slidesPerview:‘auto‘,还需使用该参数设置所要用到的loop个数 |
|
slidesPerView |
1 |
4 |
旋转模式下，设置slider‘s容器能够同时显示的slides数量。另外，支持‘auto‘值，会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式 |
|
slidesPerViewFit |
true |
false |
仅当已设置了slidesPerView:‘auto‘，以及当slides的宽度大于容器，该参数生效。默认为true然后宽度大的slide 过渡时会划分为边缘的两部分。为false时，slide transition 会划分为比容器container大的多个slides |
|
slidesPerGroup |
1 |
2 |
定义slides的数量多少为一组，在旋转模式下有效。（carousel mode） |
|
calculateHeight |
false |
true |
当值为true时，Swiper根据slides内容计算容器高度。响应式布局中或不知道slides高度时十分有用（就像响应式的图片） |
|
roundLengths |
false |
true |
值为true时，Swiper会四舍五入宽度和高度，在响应式的滑块中包含误差时十分有用。 |
|
cssWidthAndHeight |
false |
true |
值为true以及Swiper中的container，wrapper和slides没有高度 |
|
updateFormElements |
true |
false |
当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。 |
|
watchActiveIndex |
false |
true |
如果启用触屏事件期间会重新动态计算活动块的索引。 |
|
visiblilityFullfit |
false |
true |
如果启用，仅有“可视”的slides会最后适应容器的大小 |
|
autoResize |
true |
false |
值为false时，窗口尺寸改变时，禁掉slides自适应 |
|
DOManimation |
true |
false |
在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画 |
|
resistance |
true |
false |
值为false时禁用resistant bounds（抵抗反弹）,设置为‘100%‘时启用resistant（抵抗）模式 |
|
noSwiping |
false |
true |
值为true时，当swiper新增类”noSwipingClass“的滑动块时，禁掉该元素的滑动。 |
|
preventLinks |
true |
false |
启用时当碰触滑块（slides）时禁止标签链接 |
|
preventLinksPropagation |
false |
true |
如滑动过程中需要跟preventLinks一起禁用stopPropagation，设置值为true |
|
initialSlide |
2 |
0 |
初始块（页面）的索引 |
|
useCSS3Transforms |
true |
false |
值为false时禁用css3 transforms（减少内存，提高性能，同时也降低了美观）,同时使用wrapper的left/top属性代替。 |
自由模式与滑块容器（Free Mode and Scroll Container)
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
freeMode |
false |
true |
若为真slide坐标不固定 |
|
freeModeFluid |
false |
true |
若为真，释放滑块之后仍会滑动一小会 |
|
scrollContainer |
false |
true |
设置为真时，让Swiper看上去像滑动区（scrollable area） |
|
momentumRatio |
1 |
2 |
设置的值越大，当释放滑块时的动量距离越大 |
|
momentumBounce |
true |
false |
false时禁用自由模式下的（free mode）动量弹性 |
|
momentumBounceRatio |
1 |
2 |
值越大产生的动量弹性（momentum bounce）效果越明显 |
块（slides）偏移
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
centeredSlides |
false |
true |
若为真，那么活动块会居中，而非默认状态下的居左 |
|
offsetPxBefore |
0 |
100 |
指定slides与wrapper左边框的偏移量 |
|
offsetPxAfter |
0 |
100 |
指定slides与wrapper右边框的偏移量 |
|
offsetSlidesBefore |
0 |
2 |
滑块slides与wrapper左边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。 |
|
offsetSlidesAfter |
0 |
2 |
滑块slides与wrapper右边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。 |
触屏/鼠标事件效应（Touch/mouse interactions ）
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
touchRatio |
1 |
0.8 |
触屏比率 |
|
simulateTouch |
true |
false |
true,Swiper接受鼠标事件时与触屏事件相似。（单击以及拖曳滑块） |
|
onlyExternal |
false |
true |
值为true时，只能使用扩展API函数内的swipeRight 或swiperLeft改变slides滑动，其他失效。正如例子里的tabs切换十分有用 |
|
followFinger |
true |
false |
值为false时，仅当你释放slide时才会滑动，当你用手指按住滑块它不会动。 |
|
grabCursor |
false |
true |
该选项给Swiper用户提供小小的贴心应用，值为true时，光标在Swiper上时成手掌状。 |
|
shortSwipes |
true |
false |
值为false时，禁用short swipes |
|
longSwipesRatid |
0.5 |
0.3 |
Swiper 中到上/下滑块的触发率 |
|
moveStartThreshold |
false |
100 |
滑动的临界值，临界值单位为px，如果触屏距离小于该值滑块不会运动。 |
Navigation
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
keyboardControl |
false |
true |
值为true时，水平模式下，能使用键盘左右方向键滑动，垂直模式下能使用上下方向键滑动 |
|
mousewheelcontrol |
false |
true |
值为true时，能够使用鼠标滑轮滑动swiper |
|
mousewheelControlForceToAxis |
false |
true |
值为真时，鼠标轮滑会改变轴向，所以水平模式下的鼠标滑轮只作用于水平鼠标滑块，垂直的作用于垂直模式。 |
Pagination（分页器）(指示器)
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
pagination |
- |
‘.my-pagination‘ |
css选择器中的分页。或者HTML元素内的分页元素 |
|
paginaClickable |
false |
true |
值为真时，当单击指示器时会执行过渡动画到目标slide |
|
paginationAsRange |
true |
|
为真时，跟可见块相关的指示器按钮会新增css类。当使用slidesPerview超过1时会十分有用。 |
|
createPagination |
true |
false |
值为真时，Swiper会在slider内生成与slides数量相同的SPAN标签。所有这些生成的span标签都在pagination容器内。每一个span标签都有一个”swiper-pagination-switch“类名，活动的span（及当前slide下的）有一个为”swiper-active-switch’的类名，对于这些使用样式十分有用。 |
命名空间namespace
|
Parameter（参数） |
Default Value（默认值 |
Example（例子） |
Description（说明 |
|
wrapperClass |
‘swiper-wrapper‘ |
‘my-wrapper‘ |
Swiper内wrapper的css类。具体查看上面的例子 |
|
slideClass |
‘swiper-slide‘ |
‘my-slide‘ |
Swiper内slide的css类名。具体查看上面的例子 |
|
slideActiveClass |
‘swiper-slide-active‘ |
‘my-active-slide‘ |
Swiper内活动块的css类名。。。 |
|
slideActiveClass |
‘swiper-slide-visible‘ |
‘my-visible-slide‘ |
Swiper内可视块的css类名。。。 |
|
slideElement |
‘div‘ |
‘li‘ |
使用单一滑块的标签 |
|
noSwipingClass |
‘swiper-no-swiping‘ |
‘stop-swiping‘ |
html元素使用的类名，当noSwiping参数设置为true时，用于禁止滑动 |
|
paginationElement |
‘span |
‘div‘ |
使用唯一指示按钮的标签 |
|
paginatinElementClass |
‘swiper-pagination-switch‘ |
‘my-switch‘ |
使用多个指示按钮的类名 |
上一篇：c++对拍程序写法
下一篇：java 数组的复制