Swiper是一款免费及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话),主要使用与移动端的网站/网页应用程序(web apps)/原生应用程序(native apps),主要是为IOS而设计的,同时在Android/WP8系统及现代桌面浏览器也有着良好的用户体验
Swiper CDN
如果不想将Swiper文件放在你的项目中，可以使用Swiper的CDN服务。以下是各版本的Swiper CDN地址，要将4.x.x改成相应的版本，如4.0.2(或3.x.x版本)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>下载Swiper
1.可以直接去官网下载相应的swiper文件
2.通过Bower获取Swiper
$ bower install swiper3.通过Meteor获取Swiper
$ meteor add nolimits4web:swiper4.通过NPM获取Swiper
$ npm install swiperswiper初始化
new Swiper(swiperContainer,parameters)用于初始化一个Swiper,返回初始化后的Swiper实例
swiperContainer:Swiper容器的css选择器,HTMLElement or string,必选,例如'.swiper-container'
parameters:Swiper的个性化配置,object类型,可选
一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container
<div class="swiper-container" id="swiper1">....<div>
<div class="swiper-container" id="swiper2">....<div>
<div class="swiper-container" id="swiper3">....<div>
var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');举例
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项,自动滑动
})
</script>Basic(Swiper一般选项)
initialSlide
设定初始化时slide的索引;类型:number,默认:0,举例:2
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
initialSlide :2, //设置为2后，Swiper初始化时activeSlide成了第三个
})
</script>direction
Slides的滑动方向,可设置水平(horizontal)或垂直(vertical);类型:string,默认:horizontal,举例:vertical
<script>
var mySwiper = new Swiper('.swiper-container',{
direction : 'vertical',
})
</script>speed
滑动速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间;类型:number,默认:300,举例:1000
<script>
var mySwiper = new Swiper('.swiper-container',{
speed:300,
autoplay : {
delay:3000
},
})
</script>grabCursor
设置为true:鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状(根据浏览器形状有所不同);类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
grabCursor : true,
})
</script>parallax
设置为true开启视差效果;效果可以应用于container或slide的子元素,当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1;类型:boolean,默认:false,举例:true
视差位移变化
在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x(x方向)/data-swiper-parallax-y(y方向)
data-swiper-parallax接受两种类型的参数;number(单位:px),如-300,从右边300px进入左边出去;percentage(百分比),移动距离=该元素宽度*percentage
视差透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性,可选值0~1,如0.5,从半透明进入半透明出去
视差缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性,可选值如0.5,从一半大小进入一半大小出去
还可通过data-swiper-parallax-duration设定视差动画持续时间(ms),默认值是Swiper的speed,与切换时间同步
tip:设定透明度或缩放必须同时设定位移,否则无效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
<div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
<p>从右边300px开始进入，时间600ms</p>
</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
<div data-swiper-parallax-scale="0.15" >缩放变化</div>
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true,
})
</script>setWrapperSize
Swiper使用flexbox布局(display:flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
setWrapperSize :true,
})
</script>virtualTranslate
虚拟位移;当启用这个参数,Swiper除了不会移动外其他的都像平时一样运行,仅仅是不会在Wrapper上设置位移;当你想自定义一些slide切换效果时可以用,例如配合上progress;启用这个选项时slideChange和transition等事件有效(与Swiper3.x不同);类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
virtualTranslate : true,
})
</script>a11y
辅助,无障碍阅读;开启本参数为屏幕阅读器添加语音提示等信息,方便视觉障碍者,基于ARIA标准;类型:object/boolean
| 参数名 | 参数类型 | 默认值 | 定义 |
|---|---|---|---|
| prevSlideMessage | string | Previous slide | 在屏幕阅读器为上一页按钮添加信息 |
| nextSlideMessage | string | Next slide | 在屏幕阅读器为下一页按钮添加信息 |
| firstSlideMessage | string | This is the first slide | 当屏幕阅读器处于第一个slide为上一页按钮添加信息 |
| lastSlideMessage | string | This is the last slide | 当屏幕阅读器处于最后一个slide为下一页按钮添加信息 |
| paginationBulletMessage | string | Go to slide {{index}} | 当屏幕阅读器为分页器小点添加信息 |
| notificationClass | string | swiper-notification | A11y公告部分的类名 |
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
a11y : {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
firstSlideMessage: 'This is the first slide',
lastSlideMessage: 'This is the last slide',
paginationBulletMessage: 'Go to slide {{index}}',
notificationClass: 'swiper-notification',
},
})
</script>width
强制Swiper的宽度(px),当你的Swiper在隐藏状态下初始化时才用得上,这个参数会使自适应失效;类型:number,举例:500
<script>
var mySwiper = new Swiper('.swiper-container',{
width: 800, //你的slide宽度
//全屏 width: window.innerWidth,
})
</script>height
强制Swiper的高度(px),当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上,这个参数会使自适应失效;类型:number,举例:300
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
height: 300,//你的slide高度,全屏 - height:window.innerHeight,
})
</script>roundLengths
设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊;例如在1440宽度设备上,当你设定slide宽为76%时,则计算出来结果为1094.4,开启后宽度取整数1094;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
roundLengths : true,
})
</script>breakpoints
断点设定:根据屏幕宽度设置某参数为不同的值,类似于响应式布局的media screen;只有部分不需要变换布局方式和逻辑结构的参数支持断点设定,如slidesPerView/slidesPerGroup/spaceBetween,而像slidesPerColumn/loop/direction/effect等则无效,类型:object
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 40,
breakpoints: {
320: { //当宽度小于等于320
slidesPerView: 1,
spaceBetween: 10
},
480: { //当宽度小于等于480
slidesPerView: 2,
spaceBetween: 20
},
640: { //当宽度小于等于640
slidesPerView: 3,
spaceBetween: 30
}
}
})
</script>autoHeight
自动高度;设置为true时,wrapper和container会随着当前slide的高度而发生变化;类型:boolean,默认:false,举例:true
<script>
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //高度随内容变化
});
</script>uniqueNavElements
独立分页元素,当启用(默认)且分页元素的传入值为字符串时,swiper会优先查找子元素匹配这些元素;可应用于分页器/按钮/滚动条(pagination,prev/next buttons,scrollbar elements);当你的控制组件放在container外面的时候,需要用到;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
uniqueNavElements: false,
})
</script>nested
用于嵌套相同方向的swiper时,当切换到子swiper时停止父swiper的切换,请将子swiper的nested设置为true;由于需要在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})
</script>runCallbacksOnInit
初始化时触发Transition/SlideChange回调函数;类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
runCallbacksOnInit : true,
})
</script>init
当你创建一个Swiper实例时是否立即初始化;如果禁止了,可以稍后使用mySwiper.init()来初始化;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
init: false,
})
mySwiper.init();//现在才初始化
</script>preloadImages
默认为true,Swiper会强制加载所有图片;类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
preloadImages:false,
})
</script>updateOnImagesReady
当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化,使用此选项需要先开启preloadImages:true;类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
updateOnImagesReady : true,
})
</script>on
注册事件,Swiper4.0开始使用关键词this指代Swiper实例;类型:object
<script language="javascript">
var mySwiper = new Swiper('.swiper-container', {
on: {
slideChange: function () {
console.log(this.activeIndex);
},
},
};
//或者
var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {
//...
});
</script>Slides grid(网格分布)
centeredSlides
设定为true时,active slide会居中,而不是默认状态下的居左;类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
})
</script>slidesPerView
设置slider容器能够同时显示的slides数量(carousel模式),可以设置为数字(可为小数,小数不可loop)或'auto'(则自动根据slides的宽度来设定数量),loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides;类型:number/auto,默认:1,举例:2
slidesPerGroup
在carousel mode下定义slides的数量多少为一组;类型:number,默认:1,举例:3
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
slidesPerGroup : 3,
})
</script>spaceBetween
slide之间的距离(单位px);类型:number,默认:0,举例:20
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
spaceBetween : 20,
//spaceBetween : '10%',按container的百分比
})
</script>slidesPerColumn
多行布局里面每列的slide数量;类型:number,默认:1,举例:2
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerColumn : 2,
})
</script>slidesPerColumnFill
多行布局中以什么形式填充：
'column'（列）
1 3 5
2 4 6
'row'（行）。
1 2 3
4 5 6
类型:string,默认:column,举例:row
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerColumn : 2,
slidesPerColumnFill : 'row',
})
</script>slidesOffsetBefore
设定slide与左边框的预设偏移量(单位px);类型:number,默认:0,举例:100
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesOffsetBefore : 100,
})
</script>slidesOffsetAfter
设定slide与右边框的预设偏移量(单位px);类型:number,默认:0,举例:100
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesOffsetAfter : 100,
})
</script>normalizeSlideIndex
使你的活动块指示为最左边的那个slide(没开启centeredSlides时);类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
normalizeSlideIndex:false,
})
</script>Free Mode(free模式/抵抗反弹)
freeMode
默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
})
</script>freeModeMomentum
free模式动量;free模式下,若设置为false则关闭动量,释放slide之后立即停止不会滑动;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMomentum : false,
})
</script>freeModeMomentumRatio
free模式动量值(移动惯量),设置的值越大,当释放slide时的滑动时间越长,默认1s;类型:number,默认:1,举例:5
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMomentumRatio : 5,
})
</script>freeModeMomentumVelocityRatio
free模式惯性速度,设置越大,释放后滑得越快;类型:number,默认:1,举例:2
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMomentumVelocityRatio : 5,
})
</script>freeModeMomentumBounce
动量反弹;false时禁用free模式下的动量反弹,slides通过惯性滑动到边缘时,无法反弹,注意与resistance(手动抵抗)区分;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMomentumBounce : false,
})
</script>freeModeMomentumBounceRatio
值越大产生的边界反弹效果越明显,反弹距离越大;类型:number,默认:1,举例:2
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMomentumBounceRatio : 5,
})
</script>freeModeSticky
使得freeMode也能自动贴合;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeSticky : true,
})
</script>freeModeMinimumVelocity
触发FreeMode惯性的最小触摸速度(px/ms),低于这个值不会惯性滑动;类型:number,默认:0.02
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode : true,
freeModeMinimumVelocity : 1, //设置为1后需要触摸很快才能产生惯性
})
</script>Loop(环路)
loop
设置为true则开启loop模式;loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的;loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
loop : true,
})
/*如果只有一个slide就销毁swiper
if(mySwiper.slides.length<=3){
mySwiper.destroy();
}*/
</script>loopAdditionalSlides
loop模式下会在slides前后复制若干个slide,前后复制的个数不会大于原总个数;默认为0,前后各复制1个;0,1,2 --> 2,0,1,2,0
例:取值为1;0,1,2 --> 1,2,0,1,2,0,1
例:取值为2或以上，0,1,2 --> 0,1,2,0,1,2,0,1,2
类型:number,默认:0,举例:1
<script>
var mySwiper = new Swiper('.swiper-container',{
loop : true,
loopAdditionalSlides : 3, //取值为3后，总slide数为本来6个，加上前后各复制4个
})
</script>loopedSlides
在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数(一般设置为本来slide的个数);类型:number,默认:1,举例:8
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
<div class="swiper-slide">slider4</div>
<div class="swiper-slide">slider5</div>
<div class="swiper-slide">slider6</div>
<div class="swiper-slide">slider7</div>
<div class="swiper-slide">slider8</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
loop: true,
slidesPerView: 'auto',
loopedSlides: 8,
})
</script>loopFillGroupWithBlank
在loop模式下为group填充空白slide;类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true, //因为一组有3个slide，因此第八个slide后面填充了一个空白的slide
})
</script>progress(进度)
watchSlidesProgress
开启这个参数来计算每个slide的progress(进度/进程),Swiper的progress无需设置即开启,对于slide的progress属性,活动的那个为0,其他的依次减1;例:一共有6个slide,活动的是第三个,从第一个到第六个的progress属性分别是:2 1 0 -1 -2 -3
对于swiper的progress属性,活动的slide在最左(上)边时为0,活动的slide在最右(下)边时为1,其他情况平分;例:有6个slide,当活动的是第三个时swiper的progress属性是0.4,当活动的是第五个时swiper的progress属性是0.8
swiper的progress其实就是wrapper的translate值的百分值,与activeIndex等属性不同,progress是随着swiper的切换而不停的变化,而不是在某个时间点突变;类型:boolean,默认:false,举例:true
watchSlidesVisibility
开启watchSlidesVisibility选项前需要先开启watchSlidesProgress,如果开启了watchSlidesVisibility,则会在每个可见slide增加一个classname,默认为'swiper-slide-visible';类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
watchSlidesVisibility : true, //利用watchSlidesVisibility和clickedIndex制作宽度超出后自动适应的导航
})
</script>clicks(点击)
preventClicks
当swiper在触摸时阻止默认事件(preventDefault),用于防止触摸时触发链接跳转;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
preventClicks : false,//这个例子设为了false，因此触摸时链接跳转了
})
</script>preventClicksPropagation
阻止click冒泡,拖动Swiper时阻止click事件;类型:boolean,默认:true,举例:false
<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>slideToClickedSlide
设置为true则点击slide会过渡到这个slide;类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideToClickedSlide:true,
})
</script>touches(触发条件)
touchRatio
触摸距离与slide滑动距离的比率;类型:number,默认:1,举例:0.5
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
touchRatio : 0.5, //设置为0.5后slide滑动距离只有触摸距离的一半,变得难以滑动,也可以设置为负值
})
</script>simulateTouch
默认为true,Swiper接受鼠标点击/拖动;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
simulateTouch : false, //鼠标无效
})
</script>allowTouchMove
值为false时slide无法拖动,只能使用扩展API函数例如slideNext()/slidePrev()/slideTo()等改变slides滑动,等同于Swiper3.x的onlyExternal;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
allowTouchMove: false, //无法拖动
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
},
})
</script>followFinger
如设置为false拖动slide时它不会动,当释放时slide才会切换;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
followFinger : false, //拖动后释放鼠标或手指时slide滑动
})
</script>shortSwipes
设置为false时，进行快速短距离的拖动无法触发Swiper;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
shortSwipes : false, //轻轻触碰就可以切换
})
</script>longSwipes
设置为false时,进行长时间长距离的拖动无法触发Swiper;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
longSwipes : false,
})
</script>longSwipesMs
定义longSwipes的时间(单位ms),超过则属于longSwipes;类型:number,默认:300,举例:1000
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
longSwipesMs : 1000,
longSwipes:false,
})
</script>longSwipesRatio
进行longSwipes时触发swiper所需要的最小拖动距离比例,即定义longSwipes距离比例,值越大触发Swiper所需距离越大,最大值0.5;类型:number,默认:0.5,举例:0.3
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
longSwipesRatio : 0.1, //缓慢拖动释放查看效果
})
</script>threshold
拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动;类型:number,默认:false,举例:100
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
threshold : 100, //必须拖动大于100px后slide才会开始移动
})
</script>touchAngle
允许触发拖动的角度值,默认45度,即使触摸方向不是完全水平也能拖动slide;类型:number,默认:45,举例:10
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
touchAngle : 10, //设置了很小的允许拖动角度（10）
})
</script>touchMoveStopPropagation
true时阻止touchmove冒泡事件;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
touchMoveStopPropagation : false,
})
</script>resistance
边缘抵抗;当swiper已经处于第一个或最后一个slide时,继续拖动Swiper会离开边界,释放后弹回;边缘抵抗就是拖离边界时的抵抗力,值为false时禁用,将slide拖离边缘时完全没有抗力;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
resistance : false,
})
</script>resistanceRatio
抵抗率,边缘抵抗力的大小比例;值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离;类型:number,默认:0.85,举例:0.7
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
resistanceRatio : 0.9,
})
</script>iOSEdgeSwipeDetection
设置为true开启IOS的UIWebView环境下的边缘探测,如果拖动是从屏幕边缘开始则不触发swiper;这样当你在屏幕边缘触摸时,则可以返回上一页(history.back);类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
iOSEdgeSwipeDetection : true,
})
</script>iOSEdgeSwipeThreshold
IOS的UIWebView环境下的边缘探测距离,如果拖动小于边缘探测距离则不触发swiper;类型:number,默认:20,举例:50
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
iOSEdgeSwipeDetection : true,
iOSEdgeSwipeThreshold : 50,
})
</script>passiveListeners
用来提升swiper在移动设备的中的scroll表现(Passive Event Listeners),但是会和e.preventDefault冲突,所以有时候你需要关掉它;类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
passiveListeners : false,
})
</script>touchReleaseOnEdges
当滑动到Swiper的边缘时释放滑动,可用于同向Swiper的嵌套(移动端触摸有效);类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
touchReleaseOnEdges:true,
})
</script>touchEventsTarget
接受touch事件的目标,可以设为container或者wrapper;类型:string,默认:container,举例:wrapper
<script>
var mySwiper = new Swiper('.swiper-container',{
touchEventsTarget: 'wrapper',
})
</script>swiping/no swiping(禁止切换)
noSwiping
设为true时,可以在slide上(或其他元素)增加类名'swiper-no-swiping',使该slide无法拖动,希望文字被选中时可以考虑使用;类型:boolean,默认:true,举例:false
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide swiper-no-swiping"> <!-- 第二个slide上增加了类swiper-no-swiping，因此无法滑动（但是可以通过组件切换） -->
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
})
</script>noSwipingClass
不可拖动块的类名,当noSwiping设置为true时,并且在slide(或其他元素)加上此类名,目标将无法触摸拖动;类型:string,默认:swiper-no-swiping,举例:stop-swiping
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide stop-swiping"> <!-- 第二个slider加入了stop-swiping，所以第二个slide触摸无效（但是可以通过组件切换） -->
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
noSwipingClass : 'stop-swiping',
})
</script>allowSlideNext
设置为false可禁止向右或下滑动;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
allowSlideNext : false,
})
</script>allowSlidePrev
设为false可禁止向左或上滑动;类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
allowSlidePrev : false, //锁定了向左滑动，按钮组件也失效了
})
</script>swipeHandler
CSS选择器或者HTML元素,你只能拖动它进行swiping;类型:string / HTMLElement,默认:null,举例:.swipe-handler
<div class="swipe-handler">
你只能拖动这里</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
swipeHandler : '.swipe-handler',
})
//4.0.5BUG处理
if (params.swipeHandler) {
if (!$$1(e.target).closest(params.swipeHandler)[0]) { return; }
}
</script>observer(监视器)
observer
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper;默认false,不开启,可以使用update()方法更新;类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
})
$('#btn1').click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
</script>observeParents
将observe应用于Swiper的父元素,当Swiper的父元素变化时,例如window.resize/Swiper更新;类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
observeParents:true,
})
</script>namespace(命名空间)
wrapperClass
设置wrapper的css类名;类型:string,默认:swiper-wrapper,举例:my-wrapper
<div class="swiper-container">
<div class="my-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide">
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
wrapperClass : 'my-wrapper',
})
</script>
<style type="text/css">
.my-wrapper{
display: flex;
}
</style>slideClass
设置slide的类名;类型:string,默认:swiper-slide,举例:my-slide
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="my-slide">slider1</div>
<div class="my-slide">slider2</div>
<div class="my-slide">slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideClass : 'my-slide',
})
</script>slideActiveClass
设置活动块的类名;类型:string,默认:swiper-slide-active,举例:my-active-slide
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideActiveClass : 'swiper-slide-active',
})
</script>slideVisibleClass
设置可视块的类名;类型:string,默认:swiper-slide-visible,举例:my-visible-slide
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
watchSlidesVisibility : true,
slideVisibleClass : 'my-slide-visible',
})
</script>slideDuplicateClass
loop模式下被复制的slide的类名;类型:string,默认:swiper-slide-duplicate,举例:my-slide-duplicate
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideDuplicateClass : 'my-slide-duplicate',
})
</script>slideNextClass
active slide的下一个slide的类名;类型:string,默认:swiper-slide-next,举例:my-slide-next
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideNextClass : 'my-slide-next',
})
</script>slidePrevClass
active slide的前一个slide的类名;类型:string,默认:swiper-slide-prev,举例:my-slide-prev
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidePrevClass : 'my-slide-prev',
})
</script>slideDuplicatedActiveClass
loop模式下活动块对应复制块的类名,或者相反;类型:string,默认:swiper-slide-duplicate-active,举例:my-slide-duplicate-active
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideDuplicatedActiveClass : 'my-slide-duplicate-active',
})
</script>slideDuplicatedNextClass
loop模式下,下一个slide对应复制块的类名,或者相反;类型:string,默认:swiper-slide-duplicate-next,举例:my-slide-duplicate-next
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideDuplicatedNextClass : 'my-slide-duplicate-next',
})
</script>slideDuplicatedPrevClass
loop下,前一个slide对应复制块的类名,或者相反;类型:string,默认:swiper-slide-duplicate-prev,举例:my-slide-duplicate-prev
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slideDuplicatedPrevClass : 'my-slide-duplicate-prev',
})
</script>containerModifierClass
可以修改某些以swiper-container-为开头的类名;类型:string,默认:swiper-container-,举例:my-container-
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
containerModifierClass : 'my-container-',
})
</script>callbacks(回调函数)
init
回调函数,初始化后执行
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
init: function(){
//Swiper初始化了
alert('当前的slide序号是'+this.activeIndex);
},
},
})
</script>touchStart(event)
回调函数,当碰触到slider时执行,可选touchstart事件作为参数
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
touchStart: function(event){ //接触时触发
alert('事件触发了;');
},
},
})
</script>touchMove(event)
手指触碰Swiper并滑动(手指)时执行,接受touchmove事件作为参数,此时slide不一定会发生移动,比如你手指的移动方向和swiper的切换方向垂直时,对比sliderMove
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
touchMove: function(event){
//你的事件
},
},
})
</script>touchEnd(event)
回调函数,触摸释放时执行,接受touchend事件作为参数(释放即执行)
<script>
var mySwiper = new Swiper('.swiper-container',{
on: {
touchEnd: function(event){ //在最后一页继续拖动则释放跳转
//你的事件
},
},
})
</script>slideChangeTransitionStart
回调函数,swiper从当前slide开始过渡到另一个slide时执行;与Swiper3.x版本中的onSlideChangeStart(swiper)不同的是,即使释放slide时没有达到过渡条件而回弹也会触发这个函数,输出的activeIndex是过渡后的slide索引
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionStart: function(){
alert(this.activeIndex);
},
},
})
</script>slideChangeTransitionEnd
回调函数,swiper从一个slide过渡到另一个slide结束时执行
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionEnd: function(){
alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
},
},
})
</script>imagesReady
回调函数,所有内置图像加载完成后执行,同时"updateOnImagesReady"需设置为true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
imagesReady: function(){
alert('图片加载完成了');
},
},
})
</script>transitionStart
回调函数,过渡开始时触发,接受Swiper实例作为参数
Swiper运作原理:
Swiper常用运作方式有两种:手动触摸切换或者导航切换(前进后退按钮/键盘控制/分页器/内置方法slideTo等)
1.手动触摸切换拖动阶段Swiper根据手势位置实时设定wrapper的位移(setTranslate),释放拖动时Swiper会设定一次wrapper自由过渡(setTranslate/setTransition/transitionStart/slideChangeTransitionStart),速度为speed直到过渡结束(transitionEnd/slideChangeTransitionEnd)
2.导航切换可参考手动触摸释放阶段
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
transitionStart: function(){
...
},
},
})
</script>transitionEnd
回调函数,过渡结束时触发,接收Swiper实例作为参数;如果你使用setWrapperTranslate和setWrapperTransition来设定wrapper移动,这个函数不会触发,你可以使用原生transitionEnd事件;人为中断过渡不会触发这个函数
<script>
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
on:{
transitionEnd: function(swiper){
alert('过渡结束');
},
},
});
$('#btn1').click(function(){
mySwiper.setTransition(1000);
mySwiper.setTranslate(-1000);
mySwiper.$wrapperEl.transitionEnd(function () {
alert('swiper自带transitionEnd不会触发，这是自定义的');
});
})
</script>touchMoveOpposite(event)
回调函数,当手指触碰Swiper且没有按照direction设定的方向移动时执行,此时slide没有被拖动,这与sliderMove事件相反,可选touchmove事件作为参数;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
touchAngle : 10,
on:{
touchMoveOpposite(event){
console.log(event); //设置了很小的允许拖动角度(10)
},
},
})
</script>sliderMove(event)
回调函数,手指触碰Swiper并拖动slide时执行,接受touchmove事件作为参数
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay:true,
speed:1000,
on:{
sliderMove: function(){
$('#showhtml').html('函数触发了');
},
},
})
function check(){
$('#showhtml').html('普通状态');
}
setInterval("check()", 300)
</script>click(event)
回调函数,当点击或轻触Swiper用300ms后执行，接受touchend事件作为参数
触发时机:
如果没有触发touchMove(),则释放触摸/鼠标时:
1.立即执行tap()
2.如果触摸/鼠标按压时间小于300ms,并且两次触摸/点击间隔大于300ms,延迟300ms执行onClick
3.如果触摸/鼠标按压时间小于300ms,并且两次触摸/点击间隔小于300ms,立即执行doubleTap
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
click: function(){
alert('你点了Swiper');
},
},
})
</script>tap(event)
回调函数,当你轻触(tap)Swiper后执行;在移动端,click会有200~300ms延迟,所以请用tap代替click作为点击事件,接受touchend事件作为参数
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
tap: function(event){
alert('你碰了Swiper');
},
},
})
</script>doubleTap(event)
回调函数,当你两次轻触Swiper时执行,类似于双击,接受touchend事件作为参数
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
doubleTap: function(event){
alert('你双击了Swiper');
},
},
})
</script>progress(progress)
回调函数,当Swiper的progress被改变时执行,接受Swiper的progress作为参数(0-1);类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
on:{
progress: function(progress){
console.log(progress);
},
},
})
</script>reachBeginning()
回调函数,Swiper切换到初始化位置时执行
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
reachBeginning: function(){
alert('到了第一个slide');
},
},
})
</script>reachEnd()
回调函数,当Swiper切换到最后一个Slide时执行
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
reachEnd: function(){
alert('到了最后一个slide');
},
},
})
</script>beforeDestroy()
回调函数,销毁Swiper时执行;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
destroy: function(){
alert('你销毁了Swiper;');
},
},
})
$('#btn1').click(function(){
mySwiper.destroy(false);
})
</script>setTransition(transition)
回调函数,每当设置Swiper开始过渡动画时执行,transtion获取到的是Swiper的speed值;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
setTransition: function(){
//自定义事件
},
},
})
</script>resize()
当你的浏览器尺寸发生变化时执行;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
resize: function(){
//窗口变化了
},
},
})
</script>setTranslate(translate)
回调函数;当设置wrapper的偏移量时执行,可选swiper对象和wrapper的偏移量作为参数;类型:function
当触摸切换Swiper时Swiper分两步骤执行:
1.接触期间根据触摸位置实时设置Wrapper的tlanslate,此时实时执行setTranslate
2.手指放开时设定一次tlanslate和transition,此时执行一次setTranslate和setTransition和transitionStart,切换结束时执行transitionEnd一次
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
setTranslate: function(translate){
//自定义事件
},
},
})
</script>slideNextTransitionStart
回调函数,滑块释放时如果触发slider向前(右/下)切换则执行,类似于slideChangeTransitionStart,但规定了方向
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
slideNextTransitionStart: function(){
alert('开始切换');
},
},
})
</script>slideNextTransitionEnd
回调函数,slider向前(右/下)切换结束时执行,类似于slideChangeTransitionEnd,但规定了方向
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
slideNextTransitionEnd: function(){
alert('切换结束了');
},
},
})
</script>slidePrevTransitionStart
回调函数,滑块释放时如果触发slider向后(左/上)切换则执行,类似于slideChangeTransitionStart,但规定了方向
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
slidePrevTransitionStart: function(){
alert('开始切换');
},
},
})
</script>slidePrevTransitionEnd
回调函数,slider向后(左/上)切换结束时执行,类似于slideChangeTransitionEnd,但规定了方向;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
slidePrevTransitionEnd: function(){
alert('切换结束了');
},
},
})
</script>fromEdge
当Swiper是从第一个或最后一个Slide切换时执行;类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
fromEdge: function(){
alert('是从左右最两边切过来的');
},
},
})
</script>slideChange
当当前Slide切换时执行(activeIndex发生改变)
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
slideChange: function(){
alert('改变了');
},
},
})
</script>properties(swiper属性)
mySwiper.activeIndex
返回当前活动块(激活块)的索引,loop模式下注意该值会被加上复制的slide数
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.activeIndex);
})
</script>mySwiper.realIndex
当前活动块的索引,与activeIndex不同的是,在loop模式下不会将复制的块的数量计算在内
<script>
var mySwiper = new Swiper('.swiper-container',{
loop:true,
})
$('#btn1').click(function(){
alert(mySwiper.realIndex);
})
</script>mySwiper.previousIndex
返回上一个活动块的索引,切换当前索引
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.previousIndex);
})
</script>mySwiper.width / mySwiper.height
获取swiper容器的宽度/高度
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.width);
alert(mySwiper.height);
})
</script>mySwiper.touches
返回包含触控信息的对象数组,就是这5个:mySwiper.touches.startX / mySwiper.touches.startY / mySwiper.touches.currentX / mySwiper.touches.currentY / mySwiper.touches.diff
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
var txt='';
for (i in mySwiper.touches){
txt+=i+'='+mySwiper.touches[i];
}
alert(txt);
})
</script>mySwiper.params
重要参数,获取Swiper对象初始化参数,或重写该参数,如:mySwiper.params.speed = 200。
tips:不是所有参数都可以重写
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay: {
delay:3000,
disableOnInteraction: false,
},
})
$('#btn1').click(function(){
alert('速度变快了');
mySwiper.params.autoplay.delay=500;
})
</script>mySwiper.$el
swiper的container的Dom7/jQuery对象,可以通过mySwiper.el得到container的HTML元素
<script>
var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.el.style.opacity=0.5;
//mySwiper.$el.css({opacity: 0.1});
</script>mySwiper.$wrapperEl
获取swiper的wrapper的Dom7对象,可以通过mySwiper.wrapperEl得到wrapper的HTML元素
<script>
var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.$wrapperEl.addClass('my-class');
</script>mySwiper.slides
获取Swiper的slides的Dom7/jQuery对象,通过mySwiper.slides[1]获取特定的slide
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.slides.length);
mySwiper.slides[0].style.opacity=0.5;//获取slide的HTML元素并修改样式
//mySwiper.slides[0].className='className';
//mySwiper.slides.eq(0).css({opacity: 0.1});获取slide的DOM7元素并修改样式
//mySwiper.slides.eq(0).addClass('className');Swiper非JQ版带有addClass、removeClass等
})
</script>mySwiper.translate
获取wrapper的位移
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.translate);
})
</script>mySwiper.progress
获取Swiper的progress值;对于swiper的progress属性,活动的slide在最左/上边时为0,活动的slide在最右/下边时为1,其他情况平分;例:有6个slide,当活动的是第三个时swiper的progress属性是0.4,当活动的是第五个时swiper的progress属性是0.8
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.progress);
})
</script>mySwiper.isBeginning
如果Swiper位于最左/上,这个值为true
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
if(mySwiper.isBeginning){
alert('是');
}else{
alert('不是');
}
})
</script>mySwiper.isEnd
如果Swiper位于最右/下,这个值为true
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
if(mySwiper.isEnd){
alert('是');
}else{
alert('不是');
}
})
</script>mySwiper.animating
如果Swiper正在过渡/自由滑动,这个值为true
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay:1000,
})
function check(){
if(mySwiper.animating){
$('#showhtml').html('Swiper正在过渡');
}else{
$('#showhtml').html('Swiper没有在过渡');
}
}
setInterval("check()", 10)
</script>mySwiper.clickedIndex
返回最后点击Slide的索引(click)
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
alert(mySwiper.clickedIndex);
})
</script>mySwiper.clickedSlide
返回最后点击(非拖动)的Slide的HTML元素
<script>
var mySwiper = new Swiper('.swiper-container',{
})
$('#btn1').click(function(){
mySwiper.clickedSlide.style.height='400px';
})
</script>mySwiper.allowSlideNext
提示或设置是否允许切换至下一个slide
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.allowSlideNext= false;//设置
alert(mySwiper.allowSlideNext); //提示
})
</script>mySwiper.allowSlidePrev
设置/提示是否允许切换至前一个slide
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.allowSlidePrev= false;//设置
alert(mySwiper.allowSlidePrev); //提示
})
</script>mySwiper.allowTouchMove
设置/查看是否禁止触摸滑动
<script>
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('#btn1').click(function(){
mySwiper.allowTouchMove= false;//设置
alert(mySwiper.allowTouchMove); //提示
})
</script>methods(swiper方法)
mySwiper.slideNext(speed, runCallbacks)
滑动到下一个滑块;speed:可选,切换速度;runCallbacks:可选,设为false不触发transition回调函数
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.slidePrev();
})
$('#btn2').click(function(){
mySwiper.slideNext();
})
</script>mySwiper.slidePrev(runCallbacks, speed)
滑动到前一个滑块;speed:可选,切换速度;runCallbacks:可选,设为false不触发transition回调函数
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.slidePrev();
})
$('#btn2').click(function(){
mySwiper.slideNext();
})
</script>mySwiper.slideTo(index, speed, runCallbacks)
Swiper切换到指定slide;index:必选,num,指定将要切换到的slide的索引;speed:可选,num(单位ms),切换速度;runCallbacks:可选,boolean,设置为false时不会触发transition回调函数
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn').click(function(){
mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
})
</script>mySwiper.destroy(deleteInstance, cleanupStyles)
销毁Swiper;销毁所有绑定的监听事件,移除鼠标键盘事件,释放浏览器内存;deleteInstance:可选,设为false则不销毁Swiper对象,默认为true;cleanupStyles:可选,设为true则清除所有swiper设定选项和样式,比如derection等,默认为false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay: true,
keyboard : true,
mousewheel : true,
on: {
click: function(){
alert('你点了Swiper');
}
}
})
mySwiper.destroy(false); //移除所有slide监听事件，所以拖动和click事件失效了。
</script>mySwiper.getTranslate()
返回实时的wrapper位移(translate);这与通过属性mySwiper.translate获取到的数值稍有不同,即使是在过渡时(animating)也能获取到,而后者精度较高
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
alert(mySwiper.getTranslate());
})
</script>mySwiper.setTranslate(translate)
手动设置wrapper的位移;translate:必选,位移值(单位px)
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.setTransition(1000);
mySwiper.setTranslate(-300);
})
</script>mySwiper.removeSlide(index)
移除索引为index的slide;例如:
mySwiper.removeSlide(0); //移除第一个
mySwiper.removeSlide([0, 1]); //移除第一个和第二个
<script language="javascript">
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.removeSlide(1); //移除第二个slide
})
</script>mySwiper.removeAllSlides()
移除所有slides
<script language="javascript">
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.removeAllSlides(); //移除全部
})
</script>mySwiper.updateSize()
这个方法会重新计算Swiper的尺寸
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
$('#btn1').click(function(){
alert(mySwiper.height);
})
$('#btn2').click(function(){
mySwiper.slides[0].style.height='400px';
})
$('#btn3').click(function(){
mySwiper.updateSize();
alert('Swiper的高度更新了');
})
</script>mySwiper.updateSlides()
这个方法会重新计算Slides的数量,当你使用js来删除slide时可能会用到;使用mySwiper.removeSlide来删除slide则会自动计算,无需使用此方法
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerColumn : 2,
})
$('#btn1').click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$('#btn2').click(function(){
mySwiper.updateSlides();
})
</script>mySwiper.updateProgress()
这个方法会重新计算Swiper的progress值
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.updateProgress()
</script>mySwiper.updateSlidesClasses()
更新slides和bullets的active/prev/next类名
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination :{ el:'.swiper-pagination',
type: 'bullets',
}
})
$('#btn1').click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$('#btn2').click(function(){
mySwiper.updateSlides();//更新数量
mySwiper.updateSlidesClasses();//更新类名
alert('更新成功');
})
</script>mySwiper.update(updateTranslate)
更新Swiper,这个方法包含了updateContainerSize/updateSlidesSize/updateProgress/updateClasses方法;可选参数:updateTranslate,默认false,设置为true则重新计算Wrapper的位移
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
})
$('#btn1').click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$('#btn2').click(function(){
mySwiper.update()
alert('更新成功');
})
</script>mySwiper.detachEvents()
移除所有监听事件
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay: true,
keyboard: true,
mousewheel: true,
on: {
click: function(){
alert('你点了Swiper;');
}
}
})
mySwiper.detachEvents(); //移除所有监听事件
</script>mySwiper.attachEvents()
重新绑定所有监听事件
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay: true,
on: {
click: function(){
alert('你点了Swiper;');
}
}
})
mySwiper.detachEvents(); //移除所有slide监听事件
mySwiper.attachEvents();//重新绑定所有监听事件。
</script>mySwiper.appendSlide(slides)
添加slide到slides的结尾,可以是HTML元素或slide数组,例:
mySwiper.appendSlide('<div class="swiper-slide">Slide 10</div>')
mySwiper.appendSlide([ '<div class="swiper-slide">Slide 10</div>', '<div class="swiper-slide">Slide 11</div>' ]);用法示例:
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
$('#btn1').click(function(){
mySwiper.appendSlide('<div class="swiper-slide">这是一个新的slide</div>'); //加到Swiper的最后
})
</script>mySwiper.prependSlide(slides)
添加slide到slides的第一个位置,可以是HTML元素或slide数组,例
mySwiper.prependSlide('<div class="swiper-slide">Slide 0</div>')
mySwiper.prependSlide([ '<div class="swiper-slide">Slide 1</div>', '<div class="swiper-slide">Slide 2</div>' ]);用法示例:
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.prependSlide('<div class="swiper-slide">这是一个新的slide</div>'); //加到Swiper的第一个
</script>mySwiper.on(callback,handler)
添加回调函数或者事件句柄
var mySwiper = new Swiper( '.swiper-container')
mySwiper.on('click', function(){
//some code
})
等同于
var mySwiper = new Swiper( '.swiper-container', {
on:{
click: function(){
//some code
}
}
})
或
$('.swiper-container').on('click mousedown', function(e) {
//some code
})用法示例:
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.on('click', function(){
alert('你点了Swiper');
})
</script>mySwiper.once(callback,handler)
添加回调函数或事件句柄,这些事件只会执行一次
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.once('click', function(){
alert('你点了Swiper');
})
</script>mySwiper.off(event,handler)
移除某个回调/事件
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.on('click', function1)
mySwiper.on('click', function2)
function function1(){
alert('处理器1');
}
function function2(){
alert('处理器2');
}
mySwiper.off('click',function1)
</script>mySwiper.off(event)
移除事件的所有句柄
<script language="javascript">
var mySwiper = new Swiper('.swiper-container')
mySwiper.on('click', function(){
alert('你点了Swiper');
})
mySwiper.on('tap', function(){
alert('你触碰了Swiper');
})
mySwiper.off('click')
</script>mySwiper.setGrabCursor()
开启鼠标的抓手形状,相当于开启grabCursor
<script>
var mySwiper = new Swiper('.swiper-container')
$('#btn1').click(function(){
mySwiper.unsetGrabCursor();
})
$('#btn2').click(function(){
mySwiper.setGrabCursor();
})
</script>mySwiper.unsetGrabCursor()
关闭鼠标的抓手形状
<script>
var mySwiper = new Swiper('.swiper-container')
$('#btn1').click(function(){
mySwiper.unsetGrabCursor();
})
$('#btn2').click(function(){
mySwiper.setGrabCursor();
})
</script>组件
autoplay(自动切换)
autoplay
设置为true启动自动切换,并使用默认的切换设置;类型:object/boolean,默认:false,举例:true/object
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,//自动切换开启,默认停留三秒;等同于以下设置
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
});
</script>delay
自动切换的时间间隔,单位ms;还可以在某个slide上设置单独的停留时间,例<div class="swiper-slide" data-swiper-autoplay="2000">;类型:number,默认:3000,举例:5000
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000,//5秒切换一次
},
});
</script>stopOnLastSlide
如果设置为true,当切换到最后一个slide时停止自动切换(loop模式下无效);类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
stopOnLastSlide: true,
},
});
</script>disableOnInteraction
用户操作swiper之后是否禁止autoplay,默认为true:停止;如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay;操作包括触碰/拖动/点击pagination等;类型:boolean,默认:true,举例:false
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay: {
disableOnInteraction: false,
},
})
</script>mySwiper.autoplay.running
如果Swiper开启了autoplay,这个值为true
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay:true,
})
$('#btn1').click(function(){
if(mySwiper.autoplay.running){
alert('是');
}else{
alert('不是');
}
})
</script>mySwiper.autoplay.start()
开始自动切换,一般用来做"Play"按钮
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay : true,
})
$('#btn1').click(function(){
mySwiper.autoplay.stop();
})
$('#btn2').click(function(){
mySwiper.autoplay.start();
})
</script>mySwiper.autoplay.stop()
停止自动切换,一般用来制作"pause"按钮
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay : true,
})
mySwiper.el.onmouseover = function(){ //鼠标经过停止自动轮播
mySwiper.autoplay.stop();
}
</script>effects(切换效果)
touchAngle
允许触发拖动的角度值,默认45度,即使触摸方向不是完全水平也能拖动slide;类型:number,默认:45,举例:10
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
touchAngle : 10, //设置了很小的允许拖动角度（10）
})
</script>fadeEffect
fade效果参数,可选参数:crossFade;默认:false,关闭淡出;过渡时,原slide透明度为1(不淡出),过渡中的slide透明度从0->1(淡入),其他slide透明度0;可选值:true,开启淡出;过渡时,原slide透明度从1->0(淡出),过渡中的slide透明度从0->1(淡入),其他slide透明度0;当你的slide中图片大小不同时可以用到;类型:object
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'fade',
fadeEffect: {
crossFade: false,
}
})
</script>cubeEffect
cube效果参数,可选值:
slideShadows:开启slide阴影,默认true;shadow:开启投影,默认true;shadowOffset:投影距离,默认20,单位px;shadowScale:投影缩放比例,默认0.94;参数类型:object
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'cube',
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
},
})
</script>coverflowEffect
coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式,coverflow效果参数,可选值:
rotate:slide做3d旋转时Y轴的旋转角度,默认50;stretch:每个slide之间的拉伸值,越大slide靠得越紧, 默认0;depth:slide的位置深度,值越大z轴距离越远,看起来越小,默认100;modifier:depth和rotate和stretch的倍率,相当于depthmodifier/rotatemodifier/stretch*modifier,值越大这三个参数的效果越明显,默认1;slideShadows:开启slide阴影,默认true;参数类型:object
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
},
})
</script>flipEffect
3d翻转,有两个参数可设置:
slideShadows:slides的阴影,默认true;limitRotation:限制最大旋转角度为180度,默认true;参数类型:object
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'flip',
flipEffect: {
slideShadows : true,
limitRotation : true,
}
})
</script>pagination(分页器)
pagination
使用分页导航;参数类型:object
<div class="swiper-pagination"></div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
})
</script>el
分页器容器的css选择器或HTML标签;分页器等组件可以置于container之外,不同Swiper的组件应该有所区分,如#pagination1/#pagination2;参数类型:string or HTML,Element默认:null,举例:.swiper-pagination
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
})
</script>type
分页器样式类型,可选;"bullets":圆点(默认),"fraction":分式, "progressbar":进度条,"custom":自定义;参数类型:string,默认:bullets,举例:fraction
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
type: 'bullets',
//type: 'fraction',
//type : 'progressbar',
//type : 'custom',
},
})
</script>bulletElement
设定分页器指示器(小点)的HTML标签;参数类型:string,默认:span,举例:li
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
bulletElement : 'li',
},
})
</script>dynamicBullets
动态分页器;当你的slide很多时,开启后,分页器小点的数量会部分隐藏;参数类型:boolean,默认:false,举例:true
hideOnClick
默认分页器会一直显示,这个选项设置为true时点击Swiper会隐藏/显示分页器;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
hideOnClick :true,
},
})
</script>clickable
此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination :{
el: '.swiper-pagination',
clickable :true,
}
})
</script>renderBullet(index,className)
渲染分页器小点;这个参数允许完全自定义分页器的指示点,接受指示点索引和指示点类名作为参数;参数类型:function,默认:null
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
</script>renderFraction()
自定义分式类型分页器,当分页器类型设置为分式时可用;参数类型:function,默认:null
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
type: 'fraction',
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>';
},
},
})
</script>renderProgressbar()
自定义进度条类型分页器,当分页器类型设置为进度条时可用;参数类型:function,默认:null
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
renderProgressbar: function (progressbarFillClass) {
return '<span class="' + progressbarFillClass + '"></span>';
}
},
})
</script>renderCustom()
自定义特殊类型分页器,当分页器类型设置为自定义时可用;参数类型:function,默认:null
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + ' of ' + total;
}
},
})
</script>bulletClass
pagination分页器内元素的类名;参数类型:string,默认:swiper-pagination-bullet,举例:my-bullet
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
bulletClass : 'my-bullet',
},
})
</script>bulletActiveClass
pagination分页器内活动(active)元素的类名;参数类型:string,默认:swiper-pagination-bullet-active,举例:my-bullet-active
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
bulletActiveClass: 'my-bullet-active',
},
})
</script>modifierClass
修改以swiper-pagination-为前缀的类名;参数类型:string,默认:swiper-pagination-,举例:my-pagination-
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
modifierClass : 'my-pagination-',
},
})
</script>currentClass
分式类型分页器的当前索引的类名；参数类型:string,默认:swiper-pagination-current,举例:my-pagination-current
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
})
</script>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
currentClass : 'my-pagination-current',
},
})
</script>totalClass
分式类型分页器总数的类名；参数类型:string,默认:swiper-pagination-total,举例:my-pagination-total
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
totalClass : 'my-pagination-total',
},
})
</script>hiddenClass
分页器隐藏时的类名;参数类型:string,默认:swiper-pagination-hidden,举例:my-pagination-hidden
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
hideOnClick :true,
hiddenClass : 'my-pagination-hidden',
},
})
</script>progressbarFillClass
进度条型分页器的指示条的类名;参数类型:string,默认:swiper-pagination-progressbar,举例:my-pagination-progressbar
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
type:'progressbar',
progressbarFillClass : 'my-pagination-progressbar',
},
})
</script>clickableClass
可点击的pagination的类名;参数类型:string,默认:swiper-pagination-clickable,举例:my-pagination-clickable
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination:{
el: '.swiper-pagination',
clickable: true,
clickableClass : 'my-pagination-clickable',
},
})
</script>mySwiper.pagination.el
获取分页器导航的容器元素
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
})
mySwiper.pagination.$el.addClass('MyClass'); //为分页器增加样式
</script>mySwiper.pagination.bullets
获取Swiper的分页器的小点bullets的Dom7对象数组,通过类似mySwiper.pagination.bullets[1]获取其中某个
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
})
mySwiper.pagination.bullets.css('background','#FF6600');
</script>mySwiper.pagination.render()
渲染分页器
mySwiper.pagination.update()
更新分页器
navigation buttons(前进后退按钮)
navigation
使用前进后退按钮;参数类型:object
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});nextEl/prevEl
前进/后退按钮的css选择器或HTML元素;参数类型:string/HTMLElement,默认:null,举例:.swiper-button-next/.swiper-button-prev
修改箭头的颜色:除了默认的蓝色箭头外,Swiper还内置了白色和黑色两种箭头颜色,如需其他颜色可更改css样式中的fill%3D'%23007aff'详见下方代码示例,后退按钮同效
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- 修改箭头颜色示范 -->
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
<style>
/*Swiper前进按钮原样式 */
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}
/*改变了颜色和加粗的样式*/
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
/*Swiper后退按钮原样式 */
.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}
/*改变了颜色和加粗的样式*/
.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ff6600'%2F%3E%3C%2Fsvg%3E");}
</style>hideOnClick
点击slide时显示/隐藏按钮;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true,
},
})
</script>disabledClass
前进后退按钮不可用时的类名;参数类型:string,默认:swiper-button-disabled,举例:my-button-disabled
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'my-button-disabled',
},
})
</script>hiddenClass
按钮隐藏时的Class;参数类型:string,默认:swiper-button-hidden,举例:my-button-hidden
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true,
hiddenClass: 'my-button-hidden',
},
})
</script>mySwiper.navigation.nextEl/mySwiper.navigation.prevEl
获取前进/后退按钮的HTML元素,通过$prevEl获取DOM7
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChange: function(){
if(this.isEnd){ //滑到最后一个Slide时隐藏前进按钮
this.navigation.$nextEl.css('display','none');
}else{
this.navigation.$nextEl.css('display','block');
};
if(this.isBeginning){ //滑到第一个Slide时隐藏后退按钮
this.navigation.$prevEl.css('display','none');
}else{
this.navigation.$prevEl.css('display','block');
}
},
},
})
</script>mySwiper.navigation.update()
更新前进后退导航按钮
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
mySwiper.navigation.update();scollbar(滚动条)
scrollbar
为Swiper增加滚动条;参数类型:object
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>el
Scrollbar容器的css选择器或HTML元素;参数类型:string/HTMLElement,默认:null,举例:.swiper-scrollbar
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>hide
滚动条是否自动隐藏,默认:false,不会自动隐藏;参数类型:boolean,默认:true,举例:false
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
});
</script>draggable
该参数设置为true时允许拖动滚动条;参数类型:boolean,默认:false,举例:true
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
</script>snapOnRelease
如果设置为false,释放滚动条时slide不会自动贴合;参数类型:boolean,默认:true,举例:false
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
snapOnRelease: false,
},
});
</script>dragSize
设置滚动条指示的尺寸;默认'auto':自动,或者设置num(px);参数类型:string/number,举例:30
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
dragSize: 30,
},
});
</script>mySwiper.scrollbar.el
获取滚动条的HTML元素,还可通过$el获取DOM7
<script type="text/javascript">
$('.swiper-scrollbar').html('');
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
},
});
mySwiper.scrollbar.$el.css('height','15px');
</script>mySwiper.scrollbar.dragEl
获取滚动条指示条的HTML元素,还可通过$dragEl获取DOM7
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
},
});
mySwiper.scrollbar.$dragEl.css('background','#ff6600');
</script>mySwiper.scrollbar.updateSize()
更新滚动条
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
},
});
mySwiper.scrollbar.updateSize();
</script>keyboard(键盘)
keyboard
是否开启键盘控制Swiper切换;设置为true时,能使用键盘方向键控制slide滑动;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
keyboard : true,
})
</script>mySwiper.keyboard.enabled
获取键盘状态
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
keyboard : true,
})
alert(mySwiper.keyboard.enabled);
</script>mySwiper.keyboard.disable()/mySwiper.keyboard.enable()
禁止/开启键盘控制
keyPress
在允许键盘控制状态下,按键盘时会触发这个函数
<script>
var mySwiper = new Swiper('.swiper-container',{
keyboard: true,
on:{
keyPress: function(event){
alert('你按了键盘'+event);
},
},
})
</script>mousewheel(鼠标)
mousewheel
开启鼠标滚轮控制Swiper切换,可设置鼠标选项,或true使用默认值;参数类型:object/boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container', {
mousewheel: true,
});
</script>forceToAxis
当值为true让鼠标滚轮固定于轴向,当水平mode时的鼠标滚轮只有水平滚动才会起效,当垂直mode时的鼠标滚轮只有垂直滚动才会起效,普通家用鼠标只有垂直方向的滚动;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
mousewheel: {
forceToAxis: true,
}
})
</script>releaseOnEdges
如果开启这个参数,当Swiper处于边缘位置时(第一个或最后一个slide),Swiper释放鼠标滚轮事件,鼠标可以控制页面滚动;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
mousewheel: {
releaseOnEdges: true,
}
})
</script>invert
这个参数会使鼠标滚轮控制方向反转;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
mousewheel: {
invert: true,
},
})
</script>sensitivity
鼠标滚轮的灵敏度,值越大鼠标滚轮滚动时swiper位移越大;参数类型:number,默认:1,举例:0.1
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
freeMode: true,
mousewheel: {
sensitivity : 0.1,
},
})
</script>eventsTarged
鼠标滚轮事件的接收目标(handle),可以是css选择器或者HTML元素;参数类型:string/HTMLElement,默认:container,举例:#my-handle
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
mousewheel: {
eventsTarged: '#my-handle',
}
})
</script>mySwiper.mousewheel.enabled
获取鼠标控制状态,true/false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
mousewheels: true,
})
alert(mySwiper.mousewheel.enabled);
</script>mySwiper.mousewheel.enable()/mySwiper.mousewheel.disable()
开启鼠标滑轮控制/禁止鼠标滑轮控制
<script>
var mySwiper = new Swiper('.swiper-container',{
mousewheel: true,
})
$('#btn1').click(function(){
mySwiper.mousewheel.disable(); //禁止鼠标滑轮控制
})
$('#btn2').click(function(){
mySwiper.mousewheel.enable(); //开启鼠标滑轮控制
})
</script>lazy loading(延迟加载)
lazy
设为true开启图片延迟加载默认值,使preloadImages无效,或者设置延迟加载选项
图片延迟加载:需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy;背景图延迟加载:载体增加属性data-background,并且增加类名swiper-lazy,还可以加一个预加载<div class="swiper-lazy-preloader"></div>或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
当设置了slidesPerView:'auto'或slidesPerView>1,还需要开启watchSlidesVisibility;参数类型:object/boolean,默认:false,举例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <!-- 延迟加载图片的结构 -->
<img data-src="path/to/picture-1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide"> <!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)-->
<img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide"> <!-- 延迟加载背景图的结构 -->
<div data-background="path/to/picture-2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"> <!-- slide的背景延迟加载 -->
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
lazy: {
loadPrevNext: true,
},
});
</script>loadPrevNext
设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide);参数类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
lazy: {
loadPrevNext: true,
},
})
</script>loadPrevNextAmount
设置在延迟加载图片时提前多少个slide,个数不可少于slidesPerView的数量;默认为1,提前1个slide加载图片,例如切换到第三个slide时加载第四个slide里面的图片;参数类型:number,默认:1,举例:2
<script>
var mySwiper = new Swiper('.swiper-container',{
lazy: {
loadPrevNext: true,
loadPrevNextAmount: 2,
},
})
</script>loadOnTransitionStart
默认当过渡到slide后开始加载图片,如果想在过渡一开始就加载设置为true;参数类型:boolean,默认:false,举例:true
<script>
var mySwiper = new Swiper('.swiper-container',{
lazy: {
loadOnTransitionStart: true,
},
})
</script>elementClass
延迟加载的图片的类名;参数类型:string,默认:swiper-lazy,举例:my-lazy
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
lazy: {
elementClass : 'my-lazy',
},
})
</script>loadingClass
正在进行懒加载的元素的类名;参数类型:string,默认:swiper-lazy-loading,举例:my-lazy-loading
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
lazy: {
loadingClass: 'my-lazy-loading',
},
})
</script>loadedClass
懒加载完成的元素的类名;参数类型:string,默认:swiper-lazy-loaded,举例:my-lazy-loaded
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
lazy: {
loadedClass: 'my-lazy-loaded',
},
})
</script>preloaderClass
延时加载时预加载元素(preloader)的类名;参数类型:string,默认:swiper-lazy-preloader,举例:my-lazy-preloader
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
lazy: {
preloaderClass: 'my-lazy-preloader',
},
})
</script>mySwiper.lazy.load()
加载设置了延迟加载的图片;参数类型:function
mySwiper.lazy.loadInSlide(index)
根据slide的索引加载图片;参数类型:function
<script>
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
});
mySwiper.lazy.loadInSlide(2);//加载第二个Slide中的图片
</script>lazyImageLoad(slideEl, imageEl)
回调函数,图片延迟加载开始时执行,slide中每有一张图片被延迟加载就执行一次,接受延迟加载的slide,延迟加载的img作为参数(可选)
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
lazyImageLoad: function(slide, image){
alert('延迟加载图片');
console.log(slide);//哪个slide里面的图片在加载
console.log(image);//哪个图片在加载
}
}
})
</script>lazyImageReady(slideEl, imageEl)
回调函数,图片延迟加载结束时执行,slide中每有一张图片被延迟加载就执行一次,接受延迟加载的slide,延迟加载的img作为参数(可选);参数类型:function
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
lazyImageReady: function(slide, image){
alert('图片延迟加载了');
console.log(slide);//哪个slide里面的图片加载了
console.log(image);//哪个图片加载了
}
}
})
</script>zoom(调焦)
zoom
开启焦距功能:双击slide会放大/缩小,并且在手机端可双指触摸缩放,可设置缩放选项或设为true使用默认值;需要在slide中增加类名swiper-zoom-container,结构如下:
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>参数类型:booleanobject/boolean,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom : true,
})
</script>maxRatio/minRatio
最大缩放焦距(放大倍率)/最小缩放焦距(缩小倍率);如果要在单个slide上设置,可以使用data-swiper-zoom;参数类型:number,默认:3/1,举例:5/2
<div class="swiper-zoom-container" data-swiper-zoom="3">
<img src="path/to/image1.jpg">
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: {
maxRatio: 5,
minRatio: 2,
},
})
</script>toggle
是否允许双击缩放;设置为false,不允许双击缩放,只允许手机端触摸缩放;参数类型:boolean,默认:true,举例:false
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: {
toggle: false,
},
})
</script>containerClass
zoom container的类名;参数类型:string,默认:swiper-zoom-container,举例:my-zoom-container
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: {
containerClass: 'my-zoom-container',
},
})
</script>mySwiper.zoom.enabled
判断zoom是否开启
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom : true,
})
console.log(mySwiper.zoom.enabled);
</script>mySwiper.zoom.scale
获取当前缩放的图片的比例
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: true,
})
console.log(mySwiper.zoom.scale);
</script>mySwiper.zoom.enable()/mySwiper.zoom.disable()
开启zoom/禁止zoom模式
<script language="javascript">
var mySwiper = new Swiper('.swiper-container');
mySwiper.zoom.enable();
</script>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom : true,
})
mySwiper.zoom.disable();
</script>mySwiper.zoom.toggle()
zoom模式下,当前的图片放大/缩小
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: true,
})
$('#btn1').click(function(){
mySwiper.zoom.toggle();
})
</script>mySwiper.zoom.in()/mySwiper.zoom.out()
zoom模式下,当前的图片放大/缩小
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
zoom: true,
})
$('#btn1').click(function(){
mySwiper.zoom.in();
});
$('#btn2').click(function(){
mySwiper.zoom.out();
})
</script>controller(双向控制)
controller
设置双向控制的参数,或者true使用默认设置;参数类型:object/boolean,举例:true
var mySwiper = new Swiper('.swiper-container', {
controller: {
control: [swiper1,swiper2],
inverse: true,
by: 'slide',
},
//controller: true,
});control
设置为另外一个Swiper实例开始控制该Swiper;参数类型:[Swiper Instance],默认:null,举例:myswiper
<script>
var Swiper1 = new Swiper('#swiper-container1');
var Swiper2 = new Swiper('#swiper-container2',{
controller: {
control: Swiper1, //控制Swiper1
},
})
Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要在Swiper2初始化后
Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要在Swiper1初始化后
var Swiper3 = new Swiper('#swiper-container3',{
controller:{
control: [Swiper1, Swiper2],//控制前面两个Swiper
},
})
</script>inverse
设置为true时控制方向倒转;参数类型:boolean,默认:false,举例:true
<script>
var Swiper2 = new Swiper('#swiper-container2',{
initialSlide :2,
})
var Swiper1 = new Swiper('#swiper-container1',{
controller: {
control: Swiper2,
inverse :true,
},
})
</script>By
设定Swiper相互控制时的控制方式,当两个swiper的slide数量不一致时可用;默认为'slide',自身切换一个slide时被控制方也切换一个slide;可选:'container',按自身slide在container中的位置比例进行控制
例:有4个slide的swiper1控制有7个slide的swiper2,设定'slide',swiper1的1,2,3,4对应控制的swiper2为1,2,3,7;设定by:'container',swiper1的1,2,3,4对应控制的swiper2为1,3,5,7;参数类型:string,默认:slide,举例:container
<script>
var Swiper2 = new Swiper('#swiper-container2');
var Swiper1 = new Swiper('#swiper-container1',{
controller:{
control: Swiper2,
by: 'container',
},
})
</script>Thumbs(缩略图)
thumbs
thumbs组件专门用于制作带缩略图的swiper，比使用controller组件更为简便;参数类型：object
swiper
设置作为缩略图的swiper对象，类型：object Swiper。有两种方式：
1.先初始化缩略图Swiper，再初始化banner Swiper
var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
slidesPerView: 5,
});
var mySwiper = new Swiper('.swiper-container', {
...
thumbs: {
swiper: thumbsSwiper
}
});2.初始化banner Swiper的时候初始化缩略图Swiper
var mySwiper = new Swiper('.swiper-container', {
...
thumbs: {
swiper: {
el: '.swiper-container-thumbs',
slidesPerView: 5,
...
}
}
});slideThumbActiveClass
设置缩略图Swiper的活动块的附加类名。banner Swiper切换时，缩略图Swiper的原活动块类名swiper-slide-active不会切换，而缩略图Swiper的附加类名swiper-slide-thumb-active会切换。参数类型：string，默认：swiper-slide-thumb-active
thumbsContainerClass
设置缩略图Swiper的container的附加类名。参数类型：string，默认：swiper-container-thumbs
<script>
var mySwiper = new Swiper('.swiper-container', {
...
thumbs: {
swiper: {
el: '.swiper-container-thumbs',
slidesPerView: 5,
...
},
thumbsContainerClass: 'my-container-thumbs',
}
});
</script>mySwiper.thumbs.swiper
获取缩略图Swiper的实例
virtual slides(虚拟slide)
virtual
开启虚拟Slide功能,可设置选项或true使用默认值,虚拟Slide只渲染当前slide和前后的slide;参数类型:object/boolean
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: (function () {
var slides = [];
for (var i = 0; i < 600; i += 1) {
slides.push('Slide ' + (i + 1));
}
return slides;
}()),
},
});slides
需要添加的虚拟slide;参数类型:array,默认:[]
<script>
var swiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
</script>cache
DOM缓存,默认开启;参数类型:boolean,默认:true,举例:false
<script>
var swiper = new Swiper('.swiper-container', {
virtual: {
slides: ['a','b','c'],
cache: false, //关闭缓存
},
});
</script>renderSlide
渲染虚拟Slide,必须返回一个slide的HTML结构;参数类型:function,默认:null
<script>
var swiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
renderSlide:function(slide, index){
return '<div class="swiper-slide">some content'+index+slide+'</div>';
},
},
});
</script>renderExternal
渲染外观;参数类型:function,默认:null
<script>
var swiper = new Swiper('.swiper-container', {
virtual: {
renderExternal:function(data){},
},
});
</script>mySwiper.virtual.cache
获取缓存的(正在渲染的)Slide的HTML
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
console.log(mySwiper.virtual.cache);
</script>mySwiper.virtual.from
获取正在渲染的第一个虚拟Slide的序号
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
console.log(mySwiper.virtual.from);
</script>mySwiper.virtual.to
获取正在渲染的最后一个虚拟Slide的序号
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
console.log(mySwiper.virtual.to);
</script>mySwiper.virtual.slides
获取全部的虚拟slide的HTML
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
console.log(mySwiper.virtual.slides);
</script>mySwiper.virtual.appendSlide(slide)/mySwiper.virtual.prependSlide(slide)
在虚拟的Slide中添加Slide(在最后)/(在最前)
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
mySwiper.virtual.prependSlide('<div class="swiper-slide">My Slide</div>');
</script>mySwiper.virtual.update()
更新虚拟Slide的状态
<script>
var mySwiper = new Swiper('.swiper-container', {
virtual: {
slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
},
});
mySwiper.virtual.update();
</script>hash navigation(锚导航)
hashNavigation
设置散列导航选项,或true使用默认值;为每个slide增加散列导航(有点像锚链接),还需要在每个slide处增加data-hash属性,这样当swiper切换时页面url就会加上这个属性的值了,也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide,可以直接跳转到指定的slide;比如这样:直接跳到第三个slide;如果需要浏览器的前进后退按钮配合控制,需要加上watchState;参数类型:boolean,默认:false,举例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="slide1">
slider1</div>
<div class="swiper-slide" data-hash="slide2">
slider2</div>
<div class="swiper-slide" data-hash="slide3">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
hashNavigation: true,
})
</script>watchState
开启后观察浏览器窗口的的hashchange状态变化,可通过浏览器历史记录(页面前进后退按钮)或者URL的锚链接改变控制slide切换;参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
hashNavigation: {
watchState: true,
},
})
</script>replaceState
使用replaceState(window.history.replaceState)代替hashnav的hash(document.location.hash);参数类型:boolean,默认:false,举例:true
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
hashNavigation: {
replaceState: true,
},
})
</script>history navigation(历史导航)
history
设为history导航选项,或者true使用默认值,开启history导航;在slide切换时无刷新更换URL和浏览器的history.state(pushState),这样每个slide都会拥有一个自己的URL;使用history还必需在slide上增加一个属性data-history,例<div class="swiper-slide" data-history="slide1"></div>;开启history会取消hashnav;参数类型:object/boolean,举例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-history="slide1">Slide 1</div>
<div class="swiper-slide" data-history="slide2">Slide 2</div>
<div class="swiper-slide" data-history="slide3">Slide 3</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
history: true,
});
</script>replaceState
使用history.replaceState方法替换history.pushState方法;参数类型:boolean,默认:false,举例:true
<script>
var swiper = new Swiper('.swiper-container', {
history: {
replaceState: true,
},
});
</script>key
URL中的接续词;参数类型:string,默认:slides,举例:my
<script>
var swiper = new Swiper('.swiper-container', {
history: {
key: 'my',
},
});
</script>Swiper特色功能
1:1触控运动
Swiper默认提供1:1的触控距离,当然,这个比率是可以设置的(通过修改touchRatio)
触控模仿
这个功能对于开发桌面网站会很有用;简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件(点击以及拖曳滑块)
水平/垂直方向
Swiper运动主要有两种模式,horizontal(水平滑动)以及vertical(垂直运动的滑动)
自由模式(Free Mode)
这种模式下能够让slides无需定位,就像通常的滑动条
旋转调整(rotation/resize)
Swipe在移动设备旋转后能自适应尺寸,可以自动根据设备旋转和缩放
响应比例
能使用百分比的宽高定义slides,为移动端提供不同的解决方案
抵抗反弹(resistant bounds)
Swiper能够提供一种机制,就是当滑动滑块超过最左以及最右(最上或最下)的位置时触发的一种抵御机制
内建分页控制
Swiper能够快速生成内建的分页器(pagination),指定html某一标签为pagination,Swiper就能做很多东西了
自动播放
只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块(touch)为止
循环模式(Loop mode)
该种模式下,你能够无限滑动滑块,到最后一个之后会跳转回第一个
嵌套Swiper
能够将Swiper嵌套入各种不同的Swiper的slide里,例如垂直的或水平的
滑动阻止
简单来说,就是只能使用一种模式,水平或者垂直滑动
任意HTML标签
可以将任意内容放到slide里,不止仅限于图像
硬件加速
swiper使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在IOS设备里
配置灵活
Swiper在初始化的时候能够设定多个参数以便让其更加的灵活,例如滑动的速度/方向/模式等
良好的兼容性
Swiper支持移动端的Safari/Android 2.1+/windows Phone 8,以及PC端的Chrome/Firefox/IE7-10/Opera
独立性
Swiper不依赖像jQuery那样的js类库,因此能够让Swiper更加的小型以及快速
超轻量级
压缩后仅仅10KB左右
原生要素(native momentum)
有不少的原生东西提供给Swiper
旋转模式(Carousel mode)
Swiper能够让你在slides父容器下设置你所需要展示的slides数量
Swiper Animate
Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x、Swiper3.x和Swiper4.x。此插件不适用于loop模式
- 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css
<head>
<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel="stylesheet" href="path/to/animate.min.css">
<script src="path/to/swiper.min.js"></script>
<script src="path/to/swiper.animate.min.js"></script>
</head> - 初始化时隐藏元素并在需要的时刻开始动画
<script>
//Swiper4.x
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
}
}
})
</script> - 在需要运动的元素上面增加类名ani，和其他的类似插件相同，Swiper Animate需要指定几个参数:
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s如果以上这些效果不能满足你的需求，你可以仿照animate.css的格式制作一些其他效果，加到你自己的css文件。其他参数：transition-timing-function
Swiper4.x使用方法
获取Swiper
在官网下载源码:http://www.swiper.com.cn/download/index.html;只需要下载swiper.min.js/swiper.min.css即可使用;swiper是独立的,不依赖任何js框架
构建网页,引入相关文件
新建html页面,如果是移动端看的话,需要在页面头部插入视口说明
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">首先加载插件,需要用到的文件有swiper.min.js/swiper.min.css
<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>写出你要分几屏的html结构,并配上样式
在页面里写出你要分几屏的html代码,并把他们都套在一个层内,假设你要分3屏
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide p1">Slide 1</div>
<div class="swiper-slide p2">Slide 2</div>
<div class="swiper-slide p3">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
<!-- 导航等组件可以放在container之外 -->
</div>配上样式
<style type="text/css">
html,body { width:100%; height:100%;} /*这行设置能实现单层满屏显示*/
.swiper-container { width: 100%; height: 100%;} /*这行设置能实现单层满屏显示,Swiper大小不要也行*/
.p1 { background-color:#E13437;} /*p1层的背景色*/
.p2 { background-color:#9C2ACE;} /*p2层的背景色*/
.p3 { background-color:#317AC7;} /*p3层的背景色*/
</style>写入JavaScript启动代码
默认是横向滑动,如果需要竖屏滑动,需加入direction:'vertical'参数
<script>
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
pagination: { // 如果需要分页器
el: '.swiper-pagination',
},
navigation: { // 如果需要前进后退按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: { // 如果需要滚动条
el: '.swiper-scrollbar',
},
pagination: '.swiper-pagination', // 如果需要分页器
nextButton: '.swiper-button-next', // 如果需要前进后退按钮
prevButton: '.swiper-button-prev',
scrollbar: '.swiper-scrollbar', // 如果需要滚动条
})
}
</script>如果需要多个swiper嵌套,则要改动js代码
<script>
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 50
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 50
});
</script>感悟：你现在最在意的那些事情很可能只是你若干年后的根本不记得
