本文分享自 http://miliwo.com/w/1859/26062
—————————华丽的分割线———————————-
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下。能力有限,翻译难免错漏,欢迎指出,多谢!
翻译自:http://www.idangero.us/sliders/swiper/api.php
http://www.idangero.us/sliders/swiper/index.php
一了解Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。
特征(feature)
1、1:1触控运动
Swiper默认提供1:1的触控距离,当然,这个比率是可以设置的。(touchRatio)
2、触控模仿
这个功能对于开发桌面网站会很有用。简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件(点击以及拖曳滑块)
3、水平/垂直
Swiper运动主要有两种模式,horizontal(水平滑动)以及vertical(垂直运动的滑动)
4、自由模式(Free Mode)
这种模式下能够让slides 无需定位,就像通常的滑动条。(看下面的例子)
5、旋转调整 (rotation/resize)
Swiper 在移动设备旋转后能自适应尺寸。
6、响应式
能使用百分比的宽高定义slides,为移动端提供不同的解决方案。
7、滑动阻止
简单来说,就是,只能使用一种模式,水平或者垂直滑动。
8、抵抗反弹(resistant bounds)
Swiper能够提供一种机制,就是当滑动滑块超过最左以及最右(最上或最下)的位置时触发的一种抵御机制。
9、原生要素(native momentum)
有不少的原生东西提供给Swiper。
10、内建分页控制
Swiper能够快速生成内建的分页控制(pagination),指定html 某一标签为pagination,Swiper就能做很多东西了。
11、自动播放
只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块(touch)为止。
12、循环模式(Loop mode)
该种模式下,你能够无限滑动滑块,到最后一个之后会跳转回第一个。
13、旋转模式(Carousel mode)
Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。
14、滑动容器
在该特征下能够使用Swiper在一些简单的能滑动的区域里,没有slides。在Apps里十分有用。
15、嵌套Swipers
能够将Swipers嵌套入各种不同的Swiper 的slide里,例如垂直的或水平的。
16、任意的HTML 标签
可以将任一的HTML 内容放到slide里,不止仅限于图像。
17、硬件加速
swiper 使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在IOS设备里。
18、丰富的API
Swiper拥有丰富的API接口。(不过关于中文文档似乎不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块 的按钮以及4个回调函数:onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。
19、灵活的配置
Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度(speed),模式(mode水平抑或垂直的),以及自由模式(free mode)…以及其他..
20、插件API(Plugins API)
Swiper从1.7版本开始就变得强大起来了,因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)(该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar)
21、良好的兼容性
Swiper通用性的测试环境:移动端的Safari(iOS5下),Android 2.1+,windows Phone 8,以及最新版本的谷歌浏览器(Chrome),Safari,Firefox,IE10 以及欧朋浏览器(Opera)
22、老版本IE的兼容
Swiper 2.x 开始,通过DOM动画,而非css transitions 兼容IE7 以上(需要包含jQuery),因为IE7不支持css3 transitions….简单来说,支持IE7 以上版本。
23、独立性
Swiper不依赖像jQuery那样的js类库,因此能够让Swiper更加的小型以及快速。所以Swiper能够很安全地应用诸如jQuery、jQuery Mobile,jQTouch等等其他的js类库。
24、超轻量级
压缩后仅仅10KB左右。
以上,就是Swiper能够做的,应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及apps。
Usage:
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper’s CSS and JS:
<head>
....
<linkrel="stylesheet"href="http://www.wuyueblog.com/path_to_css/idangerous.swiper.css"><scriptdefersrc="http://www.wuyueblog.com/path_to_js/idangerous.swiper-2.x.min.js"></script>
....
</head>
其中引用的文件名以下载的为准。
3、使用下面的HTML布局
<divclass="swiper-container"><divclass="swiper-wrapper"><!--First Slide--><divclass="swiper-slide"><!-- 这里添加第一个HTML内容 --></div><!--Second Slide--><divclass="swiper-slide"><!-- 这里添加第二个HTML内容 --></div><!--Third Slide--><divclass="swiper-slide"><!-- 这里添加第三个HTML内容 --></div><!--Etc..--></div></div>
4、打开下载的文件中的idangerous.swiper.css,设置Swiper’s的宽度以及高度(在文件的末尾)
/* 指定swiper 容器尺寸: */
.swiper-container,.swiper-slide {
width:500px;
height:200px;}
5、初始化Swiper 在文档开始处,(或在窗口加载时)
<scripttype="text/javascript">/*======
使用文档添加事件或窗口加载事件
例如:
window.onload = function() { ...代码 ...}
或者document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false)
=======*/
window.onload =function(){var mySwiper =newSwiper('.swiper-container',{//添加需要的选项:
mode:'horizontal',
loop:true//等等..});}})</script>
API:
new Swiper(container,options)
container: 字符串要求,Swiper’s容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;
options:-对象,可选择的。Swiper参数,详情见下:
用法:
var mySwiper =newSwiper(".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(参数) | 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 的偏移量的对象。 |
Example
以下需要引用jQuery文件
<scriptsrc="http://www.wuyueblog.com/js/jquery-1.10.1.min.js"></script><scripttype="text/javascript">
$(document).ready(function(){var mySwiper = $('.swiper-container').swiper({
mode :'vertical',//选择垂直模式,
speed :500,//设置动画持续时间500ms
freeMode :true,//开启自由模式
freeModeFluid :true,//开启'fluid'自由模式
onTouchStart :function(){//触控滑块时执行代码
alert('OMG you touch the slide!')}}})</script>
Callbacks API
从Swiper2.4版本开始增加了一些回调函数,现在添加一些函数到上面。
当初始化Swiper时,旧版本指定回调函数的方式:
$(document).ready(function(){var mySwiper =newSwiper('.swiper-container',{
mode:'vertical',
speed:600,
onSlideChangeStart:function(swiper){
alert('Hello 1');}});});
新版本中能够实现无需完全重写onSlideChangeStart参数,可以添加新函数到回调函数中。
mySwiper.addCallback('SlideChangeStart',function(swiper){
alert('Hello 2');})
你会发觉在过渡动画开始时弹出“Hello 1” 以及“Hello 2“,该种方式下addCallback方法需要注意该回调函数名不包含”on“。
解除(fire)callback 函数语句:
mySwiper.fireCallback('SlideChangEnd',mySwiper);
移除(remove)callbacks:
mySwiper.removeCallback('SlideChangEnd');
Slides API
Swiper提供强大的Slides API,能够动态生成/删除/操作Slides(滑块)
Slide 实例
这个实例是简单的HTML元素但扩展了非常有用的方法。
下面的例子变量mySwiper包含了属性和方法的Swiper对象。
<scripttype="text/javascript">
$(document).ready(function(){
var mySwiper = $('.swiper-container').swiper({
mode :'vertical',//切换到垂直模式
speed :500,//动画持续时间
freeMode :true,//启动自由模式
freeModeFluid :true,//启动'fluid'自由模式
onTouchStart :function(){
//触碰滑块是的事件
alert('OMG you touch the slide!')}}})</script>
通过调用一下方法,你能生成Swiper滑块实例:
mySwiper.createSlide(html,slideClassList,element),其中:
- html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
- slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为”swiper-slide “
- element(string[字符型],optional[可选的])-创建滑块的HTML标签,缺省值为”div”
var mySwiper = $(".swiper-container").swiper({...some optins...})//创建一个新的swiper实例var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");//生成的HTML滑块:"<div><p>Here is my new slide</p></div>"var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");//生成的HTML滑块:"<span><p>Hello</p></span>"
“newSlide”变量包含在新建Slide实例之后,但如今还在内存中,并不在slider中。为了将其添加到slider中,能够使用一下链式方法有效地添加到Slide实例中:
- newSlide.append()-添加slide到slider中的最后一个位置。返回Slide实例
- newSlide.prepend()-添加slide到slider中的第一个位置。返回Slide实例
- newSlide.remove()-移除slide
- newSlide.getWidth()-返回slide宽度
- newSlide.getHeight()-返回slide高度
- newSlide.getOffset()-返回包含滑块left、top偏移量的对象
- newSlide.insertAfter(index)[index-number]-插入新滑块到index索引之后。返回Slide实例
- newSide.clone()-复制slide到新slide实例。返回新复制的Slide实例
//例子var mySwiper = $(".swiper-container").swiper({...some optins...})var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
newSlide.append()//newSlide添加到所有已存在的slides后面var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
newSlide.prepend()//-newSlide添加到所有已存在的slides的前面(第一个位置)//复制、插入Slidevar clonedSlide = newSlide.clone();
clonedSlide.append();//crazy 链式var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
newSlide.prepend().clone().append().clone().inertAfter(2)//-新创建的slide被添加到所有已存在的slide前面,然后复制slide并添加到最后,接着在复制添加到index为2的位置上
还有一些有用的方法:
- slide.html(innerHTMl)[innerHTMl-string]-工作方式类似于jQuery/Zepto.html()方法。如果指定innerHTML,那么它会替代原来slide里的inner html内容,然后方法返回slide实例。
如果innerHTML没有指定,返回slide中inner html内容。
- slide.index()-返回slide索引
- slide.isActive()返回true如果该块是活动的
- slide.setData(name,value)[name-string]-存储数据方法,能够存储所有类型变量-数组,对象,数字,字符等等
- slide.getData(name)[name-string]返回存储的变量值
- slide.data(name,value)[name-string,value-string]-保存变量值到data-[name]属性中
- slide.data(name)[name-string]-返回data-[name]属性值
//例子var mySwiper = $('.swiper-container').swiper({...some options...})//创建slide实例var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
newSlide.append().clone().html('<p>New HTML</p>').prepend()// 新创建的slide被添加到最后,然后复制该slide并添加html内容,最后插入到第一个位置var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
alert(newSlide.html())// -> <p>Here is my new slide</p>Store/Get data:
newSlide.prepend().setData('apples',['iMac','MacBook Pro','iPhone','iPad'])
newSlide.getData('apples')// -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad']
newSlide.data('apple','iPad');
newSlide.data('apple')//->'iPad'
Swiper Slides
好的,让我们 看看swiper是如何操作存在的slides(添加/移除)
- mySwiper.slides-slides数组(slides对象)
- mySwiper.appendSlide(innerHTMl,slideClassList,element)-创建新滑块并插入到slider最后面。返回slide实例:其中:
html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为”swiper-slide ”
element(string[字符型],optional[可选的])-创建滑块的HTML标签,缺省值为”div”
- mySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-插入到slider末尾。返回slide实例
- mySwiper.prependSlide(innerHTMl,slideClassList,element)-新创建slide并插入到slider首位置。返回slide实例
- mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-将slideInstance插入到slider首位置。返回slide实例。
- mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-新创建slide并插入到slider指定的索引位置index。返回slide实例。
- mySwiper.insertSlideAfter(index,slideInstance)-将slideInstance插入到slider指定的索引位置index。返回slide实例。
- mySwiper.removeSlide(index)[index-numer]-移除索引为index的slide
- mySwiper.removeLastSlide()-移除最后一个slide
- mySwiper.removeAllSlides()-移除所有slides
- mySwiper.getSlide(index)[index-number]-返回index索引的slide
- mySwiper.getLastSlide()-返回最后一个slide
- mySwiper.getFirstSlide()-返回第一个slide
//例子://创建slide并插入
mySwiper.appendSlide('Hello World')//或者:var newSlide = mySwiper.createSlide('Hello World')
mySwiper.appendSlide(newSlide)//或者:
mySwiper.appendSlide( mySwiper.createSlide('Hello World'))//复制第一个slide并插入到最后
mySwiper.getFirstSlide().clone().append();//或者:
mySwiper.appendSlide( mySwiper.getSlide(0).clone())//复制第二个slide修改内容并插入到最后
mySwiper.getSlide(1).clone().html('Hello New World!').append();//移除最后一个slide
mySwiper.removeLastSlide()//移除第二个slide
mySwiper.removeSlide(1)//Trick: 更换第一与第二个slide位置
mySwiper.getSlide(0).insertAfter(1)//Trick: 移动第一个slide到最后一个位置
mySwiper.getFirstSlide().append()//slide数量
alert(mySwiper.slides.length)//改变每个slide的htmlfor(var i =0; i < mySwiper.slides.length; i++){var slide = mySwiper.slides[i]
slide.html('<p> My index number is '+i+' </p>')}
Important Notes
重要备注
当使用改变slides数量的方法时(例如append,prepend,remove等等),reInit()方法会被调用然后slides数量 会自动重新计算。所以非常不推荐动态添加/删除slides时在”for”循环中使用”slides.length” ,因为这样做可能产生死循环。
相关推荐
基于vue移动端项目,修改后的swiper.animate.min.js文件,因为官方源码不支持 AMD/CMD/UMD 用法,具体请查看我博客相关文章
idangerous.swiper.min.js添加轮播图滑动事件,引用使用
swiper.animate.js是swiper提供的swiper结合animate的工具,然而他在vue中使用的话需要做一些修改.只是做了部分修改能使用了就可以了没有做什么大神的工厂模式各种设计,也没那能力.哈哈哈哈,反正能用,我是能用.
Swiper.js提供了丰富的API和插件,可以方便地与jQuery或其他JavaScript库结合使用。在这个特效中,Swiper.js主要负责图片的视差滚动效果和轮播逻辑。 **视差滚动**是一种视觉效果,当用户滚动页面时,背景元素以较...
8. **API接口**:Swiper提供了丰富的JavaScript API,允许开发者在运行时控制滑动行为,如启动、停止自动播放,跳转到特定的滑动项等。 9. **插件系统**:Swiper拥有强大的插件生态系统,如模拟滚动、懒加载图像和...
Swiper.min.js 多个案例以及源码,易懂易用。。。。。。。
Swiper.js是一款强大的触摸滑动库,特别适合用于创建手机移动端的幻灯片、轮播图和图片滑动切换效果。这款库以其高效性能、高度可定制性和对各种设备的良好支持而广受开发者喜爱。在"swiper.js手机图片滑动切换代码....
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的...
- **API调用**:Swiper.js提供丰富的API接口,可用于控制滑动、获取当前状态等。 7. **HTML结构**: - `index.html`文件中包含Swiper的HTML结构,如滑动容器、时间线元素等。 - 图片和文字内容可能嵌套在特定的...
Swiper.js提供了丰富的API和配置选项,允许开发者自定义滑动速度、动画效果、自动播放、无限循环等功能,以满足不同场景的需求。 在构建调查问卷页面时,Swiper.js可以被用来组织问卷的各个问题。每个问题可以视为...
Swiper.js是一款强大的触摸滑动插件,广泛用于创建响应式的滑动内容,如轮播图、产品展示、页面导航等。它具有丰富的特性和高度的定制性,使其成为前端开发者的首选工具之一。在本实例中,我们将深入探讨Swiper.js的...
同时,Swiper.js还支持使用HTML5的data-api,使得无需编写JavaScript代码就能初始化滑动效果。 CSS在Swiper.js中的作用主要是布局和样式设计。你可以使用CSS来调整滑动容器的大小、滑动项的间距、过渡效果等。此外...
7. **交互优化**:还可以利用Swiper.js的API进行更深入的交互定制,比如禁用某些滑动动作,或者在特定条件下触发某些操作。 在这个压缩包的示例代码中,我们可以看到以上步骤的具体实现,包括HTML结构、CSS样式和...
基于swiper.js实现手机触屏滑动切换图片特效代码,也支持PC端鼠标滚动自动切换图片特效,支持向上 或者向下画的图片,效果还是不错的,非常的流畅,如果再加上向下的箭头会更加的人性化,当前HTML5 场景应用非常的...
Swiper.js是一款强大的JavaScript滑动框架,主要用于创建全屏轮播、幻灯片和其他滑动交互效果。在移动设备上,它提供了触摸滑动支持,为用户提供了流畅的浏览体验。这个压缩包“基于swiper.js插件实现的全屏手机图片...
@4.5.3 swiper@4.5.3版本包的swiper.min.css,这里同样使用vue-awesome-swiper
idangerous.swiper-2.1.min.js,PC端可以用,解决ie8兼容问题