参考网址：http://www.swiper.com.cn/api/index.html
一、Swiper4.x的全部配置选项、方法、函数
1.swiper一般选项
1.1initialSlide设定初始化时slide的索引。设置为1后，Swiper初始化时默认显示第2个轮播图
1.2direction设置Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。horizontal：横向切换 ，vertical：竖向切换。
1.3speed切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
1.4grabCursor设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
1.5parallax设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1
视差位移变化
在所需要的元素上增加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，与切换时间同步。
*设定透明度或缩放必须同时设定位移，否则无效(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> <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>1.6setWrapperSize
Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
1.7virtualTranslate
虚拟的位移。当你启用这个参数，Slide不会移动，但是Swiper还是在运行，例如progress，active-slide，各种回调等。当你想自定义一些slide切换效果时可以用。例如配合上progress。
启用这个选项时slideChange和transition等事件有效（与Swiper3.x不同）。可以用来使Swiper的滑动停止（锁定）。
1.8a11y
辅助，无障碍阅读。开启本参数为屏幕阅读器添加语音提示等信息，方便视觉障碍者。基于ARIA标准。
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>1.9width
强制Swiper的宽度(px)，当你的Swiper在隐藏状态下初始化时才用得上。这个参数会使自适应失效。
1.10height
强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
1.11roundLengths
设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊。
例如在1440宽度设备上，当你设定slide宽为76%时，则计算出来结果为1094.4，开启后宽度取整数1094。
1.12breakpoints
断点设定：根据屏幕宽度设置某参数为不同的值，类似于响应式布局的media screen。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween，而像slidesPerColumn、loop、direction、effect等则无效。
<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>1.13autoHeight
自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
1.14uniqueNavElements
独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条（pagination, prev/next buttons and scrollbar elements）。
当你的控制组件放在container外面的时候，需要用到。
效果演示
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
uniqueNavElements: false,
})
</script>1.15nested
用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
请将子swiper的nested设置为true。
由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。
<script>
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})
</script>1.16runCallbacksOnInit
如果你的初始化slide不是第一个(例initialSlide:2)或者设置了loop: true，那么初始化时会触发一次 [Transition/SlideChange] [Start/End] 回调函数，如果不想触发，设置为false。
1.17watchOverflow
当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航等。默认不开启这个功能。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
watchOverflow: true,//因为仅有1个slide，swiper无效
navigation: {
nextEl: '.swiper-button-next',//自动隐藏
prevEl: '.swiper-button-prev',//自动隐藏
},
pagination: {
el: '.swiper-pagination',//自动隐藏
},
scrollbar: {
el: '.swiper-scrollbar',//自动隐藏
},
})
</script>1.18on
注册事件，Swiper4.0开始使用关键词this指代Swiper实例。
<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>1.19init
当你创建一个Swiper实例时是否立即初始化。
如果禁止了，可以稍后使用mySwiper.init()来初始化。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
init: false,
})
mySwiper.init();//现在才初始化
</script>1.20preloadImages
默认为true，Swiper会强制加载所有图片。
1.21updateOnImagesReady
当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
2.网格分布
2.1centeredSlides
设定为true时，active slide会居中，而不是默认状态下的居左。
2.2slidesPerView
设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
2.3slidesPerGroup
在carousel mode下定义slides的数量多少为一组。
2.4spaceBetween
在slide之间设置距离（单位px）。
2.5slidesPerColumn
多行布局里面每列的slide数量。设置显示几行
2.6slidesPerColumnFill
多行布局中以什么形式填充：（数字代表第几张轮播图）
'column'（列）
1 3 5
2 4 6
'row'（行）。
1 2 3
4 5 6
2.7slidesOffsetBefore
设定slide与左边框的预设偏移量（单位px）。
2.8slidesOffsetAfter
设定slide与右边框的预设偏移量（单位px）。
2.9normalizeSlideIndex
使你的活动块指示为最左边的那个slide（没开启centeredSlides时）
3.LOOP环路
3.1loop
设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
3.2loopAdditionalSlides
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
3.3loopedSlides
在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置为本来slide的个数)。
3.4loopFillGroupWithBlank
在loop模式下，为group填充空白slide
4.Clicks点击
4.1slideToClickedSlide
设置为true则点击slide会过渡到这个slide。
5.TOUCHES触发条件
5.1touchRatio
触摸比例。触摸距离与slide滑动距离的比率。设置为0.5后slide滑动距离只有触摸距离的一半，变得难以滑动。设置为-1后与拖动方向相反的Swiper
5.2simulateTouch
鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。电脑端移动无效
5.3allowTouchMove
允许触摸滑动。设为false时，slide无法滑动，只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动。
等同于Swiper3.x 的 onlyExternal
5.4followFinger
跟随手指。如设置为false，手指滑动时slide不会动，当你释放时slide才会切换。
5.5shortSwipes
默认允许短切换。设置为false时，只能长切换，进行快速且短距离的滑动无法触发切换。
5.6longSwipes
设置为false时，进行长时间长距离的拖动无法触发Swiper。
*某些版本无效(4.0.7)
5.7longSwipesMs
定义longSwipes的时间（单位ms），超过则属于longSwipes。
5.8longSwipesRatio
进行longSwipes时触发swiper所需要的最小拖动距离比例，即定义longSwipes距离比例。值越大触发Swiper所需距离越大。最大值0.5。
5.9threshold
拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。
5.10resistance
边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。边缘抵抗就是拖离边界时的抵抗力。值为false时禁用，将slide拖离边缘时完全没有抗力。
6.CALLBACKS回调函数
6.1init
回调函数，初始化后执行。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
init: function(){
//Swiper初始化了
alert('当前的slide序号是'+this.activeIndex);
},
},
})
</script>6.2touchStart(event)
回调函数，当碰触到slider时执行。可选touchstart事件作为参数。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on: {
touchStart: function(event){
alert('事件触发了;');
},
},
})
</script>6.3touchMove(event)
手指触碰Swiper并滑动（手指）时执行，接受touchmove事件作为参数。此时slide不一定会发生移动，比如你手指的移动方向和swiper的切换方向垂直时。对比sliderMove。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
on:{
touchMove: function(event){
//你的事件
},
},
})
</script>其他函数、属性参考http://www.swiper.com.cn/api/event/91.html
7.SWIPER方法
7.1mySwiper.slideNext(speed, runCallbacks)滑动到下一个滑块。mySwiper.slidePrev(speed,runCallbacks)
滑动到前一个滑块。speed：可选，切换速度runCallbacks：可选，设为false不触发transition回调函数
<script>
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
mySwiper.slidePrev();
})
$('#btn2').click(function(){
mySwiper.slideNext();
})
</script>7.2mySwiper.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>7.3mySwiper.slideToLoop(index, speed, runCallbacks)
在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
index:必选，num，指定将要切换到的slide的索引。
speed:可选，num(单位ms)，切换速度
runCallbacks: 可选，boolean，设置为false时不会触发transition回调函数。
<script>
var mySwiper = new Swiper('.swiper-container',{
loop: true,
});
$('#btn').click(function(){
mySwiper.slideToLoop(0, 1000, false);//切换到第一个slide，速度为1秒
})
</script>7.4mySwiper.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>7.5mySwiper.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>其他方法见网址http://www.swiper.com.cn/api/methods/257.html
二、组件
1.Autoplay自动切换
1.1autoplay
设置为true启动自动切换，并使用默认的切换设置。
1.2delay
自动切换的时间间隔，单位ms
你还可以在某个slide上设置单独的停留时间，例<div class="swiper-slide" data-swiper-autoplay="2000">
1.3stopOnLastSlide
如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
1.4disableOnInteraction
用户操作swiper之后，是否禁止autoplay。默认为true：停止。
如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
操作包括触碰，拖动，点击pagination等。
2.EFFECTS切换效果
2.1effect
slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
3.pagination分页器
3.1pagination使用分页导航。
3.2clickable
此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
4.Navigation Buttons前进后退按钮
4.1navigation
使用前进后退按钮。
其他组件见http://www.swiper.com.cn/api/navigation/355.html
<script>
var swiper = new Swiper('.swiper-container', {//new Swiper(swiperContainer, parameters)用于初始化一个Swiper，返回初始化后的Swiper实例。
initialSlide: 0,//轮播图默认初始化时显示第一张
direction： 'horizontal',//轮播图横向切换
speed: 2000，//每隔2S自动切换轮播图
grabCursor : true,//鼠标放到轮播图上时指针会变成手掌形状，拖动轮播图时指针会变成抓手形状
parallax : true,//设置为true开启视差效果。然后在所需要的元素上div增加data-swiper-parallax属性
setWrapperSize :true,//开启这个设定会在Wrapper上添加等于slides相加的宽或高
virtualTranslate : true,//轮播图不会移动，但是轮播图还在运行
width: 800, //设置slide宽度 ；全屏 width: window.innerWidth
direction: 'vertical',height: 300,//要设置slide高度，首先要设置切换方向为垂直；全屏 height : window.innerHeight
roundLengths : true, //设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊
autoHeight: true, //高度随内容变化
preloadImages:false,//不加载所有图片
updateOnImagesReady : true,//Swiper重新初始化
centeredSlides : true,//默认active slide居左，设置为true后居中
slidesPerView :1,//默认显示一张轮播图在当前页面，设置一行显示的个数
slidesPerView : 3,slidesPerGroup : 3,//表示当前页面显示三张轮播图，然后三张轮播图为一组，每次切换时直接是切换到另外三张轮播图
spaceBetween : 20,//轮播图之间距离为20；spaceBetween : '10%',按container的百分比
slidesPerColumn: 2,//显示2行
slidesPerColumnFill : 'row',//代表以行依次显示轮播图
slidesOffsetBefore : 100,//设定slide与左边框的预设偏移量
slidesOffsetAfter : 100,//设定slide与右边框的预设偏移量
loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)，可以让图片无限轮播
loopAdditionalSlides : 1,//取值为1后，0,1,2 --> 1,2,0,1,2,0,1
loopedSlides: 8,//设置循环模式下，轮播图为8个
loopFillGroupWithBlank: true,//最后一张轮播图后添加一张空白slide
slideToClickedSlide: true,//设置为true则点击轮播图会过渡到这个轮播图，对于多张轮播图在同一页面显示时比较常用
touchRatio : 0.5,//拖动切换轮播图时，触摸速度很慢
simulateTouch : false,//设置为false后电脑端鼠标拖动无效，移动端仍可正常滑动。
allowTouchMove: false, //关闭拖动,轮播图无法拖动
followFinger : false,//滑动时slide不动，释放鼠标或手指时slide切换
shortSwipes : false,//只能将整张轮播图都滑动，才能切换轮播图
longSwipes: false,//将整张轮播图都滑动，不能切换轮播图
longSwipesMs : 5000,longSwipes:false,//5秒内都算短滑动
longSwipesRatio : 0.1,//滑动超过10%即可触发切换
threshold : 100,//必须拖动大于100px后slide才会开始移动。
autoplay:true,//轮播图自动切换，默认停留三秒.等同于以下设置/*autoplay: {delay: 3000,stopOnLastSlide: false, disableOnInteraction: true,},*/
autoplay: {delay: 1000,},//1秒切换一次
autoplay: {stopOnLastSlide: true,},//轮播到最后一张轮播图时，自动切换停止
autoplay: {disableOnInteraction: true,},//触碰后自动切换停止
effect : 'flip',//3d翻转
effect : 'fade',//淡入
effect : 'cube',//方块
effect : 'coverflow',slidesPerView: 3,centeredSlides: true,//3d流
pagination: '.swiper-pagination',//pagination分页器，让小圆点显示
paginationClickable: true,//显示参数设置为true时，点击分页器的小圆点会控制Swiper切换。
navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},//前进后退按钮，等同于如下设置
nextButton: '.swiper-button-next',//实现下一页的点击
prevButton: '.swiper-button-prev',//实现上一页的点击
</script>
三、具体使用
1.到该网址http://www.swiper.com.cn/download/index.html下载
2.下载好后，解压，选择自己需要使用的demo案例，以下以420为例
3.将420用编辑器打开。查看这个html文件内引用了哪些外部文件。
4.将这个420文件和内部引用的文件都复制到你需要置入的文件夹内
5.置入完毕后，将该文件夹内的420案例放到编辑器，将其内部引用的文件修改一下路径。此处我为了区分，修改420名字为test
6.根据自己需求，对应api文档，修改test.html的css代码和js代码
扫一扫
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
