Swiper是一款免费及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话),主要使用与移动端的网站/网页应用程序(web apps)/原生应用程序(native apps),主要是为IOS而设计的,同时在Android/WP8系统及现代桌面浏览器也有着良好的用户体验

swiper初始化

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

<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>

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数量

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>