Usage:
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper's CSS and JS:
1 <head>
2 ....
3 <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
4 <script defer src="path_to_js/idangerous.swiper-2.x.min.js"> </script>
5 ....
6 </head>
其中引用的文件名以下载的为准。
3、使用下面的HTML布局
1 <div class="swiper-container">
2 <div class="swiper-wrapper">
3 <!--First Slide-->
4 <div class="swiper-slide">
5 <!-- 这里添加第一个HTML内容 -->
6 </div>
7 <!--Second Slide-->
8 <div class="swiper-slide">
9 <!-- 这里添加第二个HTML内容 -->
10 </div>
11 <!--Third Slide-->
12 <div class="swiper-slide">
13 <!-- 这里添加第三个HTML内容 -->
14 </div>
15 <!--Etc..-->
16 </div>
17 </div>
4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾)
/* 指定swiper 容器尺寸: */
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
5、初始化Swiper 在文档开始处,(或在窗口加载时)
1 <script type="text/javascript">
2 /*======
3 使用文档添加事件或窗口加载事件
4 例如:
5 window.onload = function() { ...代码 ...}
6 或者document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false)
7 =======*/
8 window.onload = function() {
9 var mySwiper = new Swiper('.swiper-container',{
10 //添加需要的选项:
11 mode:'horizontal',
12 loop: true
13 //等等..
14 });
15 }
16 })
17 </script>
API:
new Swiper(container,options)
container: 字符串要求,Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;
options:-对象,可选择的。Swiper参数,详情见下:
用法:
1 var mySwiper = new Swiper(".swiper-container",{
2 speed:750,
3 mode:"vertical"
4 })
返回拥有众多有用函数(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文件
1 <script src="js/jquery-1.10.1.min.js"></script>
2
3 <script type="text/javascript">
4
5 $(document).ready(function(){
6
7 var mySwiper = $('.swiper-container').swiper({
8
9 mode : 'vertical', //选择垂直模式,
10
11 speed : 500, //设置动画持续时间500ms
12
13 freeMode : true, //开启*模式
14
15 freeModeFluid : true, //开启'fluid'*模式
16
17 onTouchStart : function() {
18
19 //触控滑块时执行代码
20
21 alert('OMG you touch the slide!')
22
23 }
24
25 }
26
27 })
28
29 </script>
Callbacks API
从Swiper2.4版本开始增加了一些回调函数,现在添加一些函数到上面。
当初始化Swiper时,旧版本指定回调函数的方式:
1 $(document).ready(function(){
2
3 var mySwiper = new Swiper('.swiper-container',{
4
5 mode:'vertical',
6
7 speed: 600,
8
9 onSlideChangeStart: function(swiper){
10
11 alert('Hello 1');
12
13 }
14
15 });
16
17 });
新版本中能够实现无需完全重写onSlideChangeStart参数,可以添加新函数到回调函数中。
1 mySwiper.addCallback('SlideChangeStart', function(swiper){
2
3 alert('Hello 2');
4
5 })
你会发觉在过渡动画开始时弹出“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对象。
1 <script type="text/javascript">
2 $(document).ready(function(){
3 var mySwiper = $('.swiper-container').swiper({
4 mode : 'vertical', //切换到垂直模式
5 speed : 500, //动画持续时间
6 freeMode : true, //启动*模式
7 freeModeFluid : true, //启动'fluid'*模式
8 onTouchStart : function() {
9 //触碰滑块是的事件
10 alert('OMG you touch the slide!')
11 }
12 }
13 })</script>
通过调用一下方法,你能生成Swiper滑块实例:
mySwiper.createSlide(html,slideClassList,element),其中:
- html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
- slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为"swiper-slide "
- element(string[字符型],optional[可选的])-创建滑块的HTML标签,缺省值为"div"
1 var mySwiper = $(".swiper-container").swiper({...some optins...})
2
3 //创建一个新的swiper实例
4
5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
6
7 //生成的HTML滑块:"<div class="swiper-slide"><p>Here is my new slide</p></div>"
8
9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10
11 //生成的HTML滑块:"<span class="swiper-slide red-slide"><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实例
1 //例子
2
3 var mySwiper = $(".swiper-container").swiper({...some optins...})
4
5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
6
7 newSlide.append()//newSlide添加到所有已存在的slides后面
8
9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10
11 newSlide.prepend()//-newSlide添加到所有已存在的slides的前面(第一个位置)
12
13 //复制、插入Slide
14
15 var clonedSlide = newSlide.clone();
16
17 clonedSlide.append();
18
19 //crazy 链式
20
21 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
22
23 newSlide.prepend().clone().append().clone().inertAfter(2)
24
25 //-新创建的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]属性值
1 //例子
2
3 var mySwiper = $('.swiper-container').swiper({...some options...})
4
5 //创建slide实例
6 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
7 newSlide.append().clone().html('<p>New HTML</p>').prepend()
8 // 新创建的slide被添加到最后,然后复制该slide并添加html内容,最后插入到第一个位置
9
10 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
11 alert(newSlide.html()) // -> <p>Here is my new slide</p>
12
13 Store/Get data:
14 newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad'])
15 newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad']
16
17 newSlide.data('apple','iPad');
18 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
1 //例子:
2
3 //创建slide并插入
4 mySwiper.appendSlide('Hello World')
5 //或者:
6 var newSlide = mySwiper.createSlide('Hello World')
7 mySwiper.appendSlide(newSlide)
8 //或者:
9 mySwiper.appendSlide( mySwiper.createSlide('Hello World') )
10
11 //复制第一个slide并插入到最后
12 mySwiper.getFirstSlide().clone().append();
13 //或者:
14 mySwiper.appendSlide( mySwiper.getSlide(0).clone() )
15
16 //复制第二个slide修改内容并插入到最后
17 mySwiper.getSlide(1).clone().html('Hello New World!').append();
18
19 //移除最后一个slide
20 mySwiper.removeLastSlide()
21
22 //移除第二个slide
23 mySwiper.removeSlide(1)
24
25 //Trick: 更换第一与第二个slide位置
26 mySwiper.getSlide(0).insertAfter(1)
27
28 //Trick: 移动第一个slide到最后一个位置
29 mySwiper.getFirstSlide().append()
30
31 //slide数量
32 alert(mySwiper.slides.length)
33
34 //改变每个slide的html
35 for (var i = 0; i < mySwiper.slides.length; i++) {
36 var slide = mySwiper.slides[i]
37 slide.html('<p> My index number is '+i+' </p>')
38 }
Important Notes 重要备注 当使用改变slides数量的方法时(例如append,prepend,remove等等),reInit()方法会被调用然后slides数量会自动重新计算。所以非常不推荐动态添加/删除slides时在"for"循环中使用"slides.length" ,因为这样做可能产生死循环。
|