开源/免费/强大的移动端触摸滑动插件 — Swiper

webmirror 2017-11-27

javascript 函数 string class 插件 滑动 swiper

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 swiper

3.通过Meteor获取Swiper

$ meteor add nolimits4web:swiper

4.通过NPM获取Swiper

$ npm install swiper

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

参数名 参数类型 默认值 定义
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模式

  1. 使用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>    
  1. 初始化时隐藏元素并在需要的时刻开始动画
<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>   
  1. 在需要运动的元素上面增加类名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>

感悟:你现在最在意的那些事情很可能只是你若干年后的根本不记得

登录 后评论
下一篇
云栖号资讯小编
33331人浏览
2020-07-13
相关推荐
VUE组件汇总
4934人浏览
2018-06-05 16:20:00
前端知识库
3539人浏览
2017-04-10 16:37:34
最全前端资源汇总
6865人浏览
2017-11-15 11:28:00
前端插件集合
735人浏览
2016-07-21 16:54:00
Swiper说明&&API手册
900人浏览
2014-12-30 20:35:00
移动端滑动切换
651人浏览
2016-11-30 10:19:00
0
2
0
8431