下面根据Swiper4的API文档,总结下Swiper4.x的配置选项,包括全部配置选项、方法、函数
本章内容会过长,根据内容列表查找相应配置选项即可快速找到
【版本对比】
Swiper4的API变化:
Swiper4将组件的相关选项整合起来了,并且修改了回调函数获取swiper实例的方式为this关键词
【组件列表】
Navigation 分页器 Pagination 按钮
Scrollbar 滚动条 Autoplay 自动切换
Lazy Loading 延迟加载图片 Zoom 缩放
Keyboard Control 键盘 Mousewheel Control 鼠标
Virtual Slides 虚拟块 Hash Navigation 锚导航
History Navigation 历史导航 Controller 相互控制
Accessibility 障碍使用辅助
过渡类:
Fade Effect 渐变过渡 Coverflow Effect 行进翻转过渡
Flip Effect 翻转过渡 Cube Effect 方块过渡
【内容列表】
(1)Swiper初始化;
(2)Swiper一般基础选项;
(3)网格分布;
(4)free模式/抵抗反弹
(5)环路 / 循环Loop
(6)progress进度
(7)Clicks点击
(8)Touches(触发条件)
【详解】
(1)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> <script> var swiper1 = new Swiper('#swiper1'); var swiper2 = new Swiper('#swiper2'); var swiper3 = new Swiper('#swiper3'); </script>
案例:效果中用css给slide设置了高度和背景色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>swiper测试</title> <link rel="stylesheet" href="./swiper.min.css"> <link rel="stylesheet" href="./animate.min.css"> <style type="text/css"> .one{ width: 100%; height: 300px; background-color: #00bcd4; } </style> </head> <body> <div class="swiper-container" id="oneContainer"> <div class="swiper-wrapper"> <div class="swiper-slide one">slider1</div> <div class="swiper-slide one">slider2</div> <div class="swiper-slide one">slider3</div> </div> </div> <hr> <div class="swiper-container" id="twoContainer"> <div class="swiper-wrapper"> <div class="swiper-slide one">slider1</div> <div class="swiper-slide one">slider2</div> <div class="swiper-slide one">slider3</div> </div> </div> <script src="./swiper.min.js"></script> <script src="./swiper.animate.min.js"></script> <script> var mySwiperOne = new Swiper('#oneContainer', { autoplay: true,//可选选项,自动滑动 }); var mySwiperTwo = new Swiper('#twoContainer', { autoplay: true,//可选选项,自动滑动 }) </script> </body> </html>
(2)Swiper一般基础选项
注意:基础设置的数据类型,string类型的值要用双引号""
①initialSlide(初始化幻灯片) 类型:number 默认:0
例如:设置initialSlide = 2后,Swiper初始化时activeSlide成了第三个
②direction(滑动方向) 类型:string 默认:horizontal水平
例如:可设置水平(horizontal)或垂直(vertical)
③speed(切换速度) 类型:number 默认:300ms
slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间
④grabCursor(抓住光标) 类型:boolean 默认:false
设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)
⑤parallax(视差) 类型:boolean 默认:false
设置为true开启视差效果,效果可以应用于container或slide的子元素
效果列表:
1.视差位移变化
在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)
data-swiper-parallax接受两种类型的参数
number(单位:px),如-300,从右边300px进入左边出去;
percentage(百分比),移动距离=该元素宽度 * percentage
2.透明度变化
在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1,如0.5,从半透明进入半透明出去
3.缩放变化
在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5,从一半大小进入一半大小出去
4.持续时间
还可通过data-swiper-parallax-duration设定视差动画持续时间(ms)。默认值是Swiper的speed,与切换时间同步。
注意:设定透明度或缩放必须同时设定位移,否则无效
<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> </div> <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ parallax : true, }) </script>
⑥setWrapperSize(设置包装大小) 类型:boolean 默认:false
Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到
<script> var mySwiper = new Swiper('.swiper-container',{ setWrapperSize :true, }) //获取全部slide相加(wrapper)的宽度 console.log(mySwiper.$wrapperEl.css('width')); </script>
⑦virtualTranslate(虚拟位移)
虚拟的位移。当你启用这个参数,Slide不会移动,但是Swiper还是在运行,例如progress,active-slide,各种回调等。当你想自定义一些slide切换效果时可以用。例如配合上progress。
启用这个选项时slideChange和transition等事件有效(与Swiper3.x不同);还可以用来使Swiper的滑动停止(锁定)
效果演示:滑动Swiper,slide没移动,但是swiper切换了
<script> var mySwiper = new Swiper('.swiper-container',{ virtualTranslate : true, }) //mySwiper.params.virtualTranslate=true; </script>
⑧width宽度 强制Swiper的宽度(px),当你的Swiper在隐藏状态下初始化时才用得上,这个参数会使自适应失效
类型:number
<script> var mySwiper = new Swiper('.swiper-container',{ direction: "horizontal", width: 800, //你的slide宽度 //全屏 width: window.innerWidth, }) </script>
⑨height高度 强制Swiper的高度(px),当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上,这个参数会使自适应失效
类型:number
<script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', height: 300,//你的slide高度 //全屏 height : window.innerHeight, }) </script>
⑩roundLengths(范围长度) 类型:boolean 默认:false
设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊
例如在1440宽度设备上,当你设定slide宽为76%时,则计算出来结果为1094.4,开启后宽度取整数1094
<script> var mySwiper = new Swiper('.swiper-container',{ roundLengths : true, }) </script>
⑪breakpoints(断点) 类型:object
断点设定:根据屏幕宽度设置某参数为不同的值,类似于响应式布局的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>
⑫autoHeight(自动高度) 类型:boolean 默认:false
设置为true时,wrapper和container会随着当前slide的高度而发生变化
<script> var swiper = new Swiper('.swiper-container', { autoHeight: true, //高度随内容变化 }); </script>
⑬uniqueNavElements(独特导航元素) 类型:boolaen 默认:true
当控制组件放在container外面的时候,需要用到。
默认为true时,仅本swiper的container内的分页器有效,设置为false后,container以外的分页器也生效了
案例:
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ pagination: { el: '.swiper-pagination', }, uniqueNavElements: false, }) </script>
⑭nested(嵌套) 类型:boolean 默认:false
用于嵌套相同方向的swiper时,当切换到子swiper时停止父swiper的切换。
请将子swiper的nested设置为true,由于需要在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效。
同方向的swiper嵌套例子,不要连续快速切换
<script> var mySwiper = new Swiper('#swiper-container1')//父swiper var mySwiper2 = new Swiper('#swiper-container2',{//子swiper nested:true, resistanceRatio: 0,//阻力比 }) </script>
⑮watchOverflow(监视溢出) 类型:boolean 默认:false
当没有足够的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>
⑯runCallbacksOnInit(在Init上运行回调) 类型:boolean 默认:true
如果你的初始化slide不是第一个(例initialSlide:2)或者设置了loop: true,那么初始化时会触发一次 [Transition/SlideChange] [Start/End] 回调函数,如果不想触发,设置为false。
案例:每换一张,执行一次回调(配置无效?!!!)
⑰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>
⑱init(初始化) 类型:boolean 默认:false
当你创建一个Swiper实例时是否立即初始化;如果禁止了,可以稍后使用mySwiper.init()来初始化。
案例:6秒后初始化
var mySwiper = new Swiper('#oneContainer', { init:false, autoplay: true,//可选选项,自动滑动 initialSlide:2,//初始化幻灯片首个 }); setTimeout(function(){ mySwiper.init();//现在才初始化 },6000)
⑲preloadImages(预加载图像) 类型:boolean 默认:true
默认为true,Swiper会强制加载所有图片
⑳updateOnImagesReady(更新图像就绪) 类型:boolean 默认:true
当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
(3)Swiper网格分布
①centeredSlides(居中幻灯片) 类型:boolean 默认:false
设定为true时,active slide会居中,而不是默认状态下的居左
②slidesPerView(每个视图幻灯片) 类型:number 默认:1
设置slider容器能够同时显示的slides数量(carousel模式)
可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides(成环幻灯片)
③slidesPerGroup(每组幻灯片数量) 类型:number 默认:1
在carousel mode(轮播)下定义slides的数量多少为一组。例如为3时,切换时直接3个3个切换
④spaceBetween(空间间距) 类型:number 默认:0
在slide之间设置距离(单位px / %)
注意:若为%,则是按container的百分比,且百分比需加""引号
⑤slidesPerColumn(幻灯片每列) 类型:number 默认:1
多行布局里面每列的slide数量,例slidesPerColumn为2时,每行有两列slider
⑥slidesPerColumnFill(幻灯片每列填充) 类型:string 默认:column(列)
多行布局中以什么顺序填充:
'column'(列) 'row'(行)
1 3 5 或者 1 2 3
2 4 6 4 5 6
⑦slidesOffsetBefore(幻灯片前移偏移) 类型:number 默认:0
设定slide与左边框的预设偏移量(单位px)
⑧slidesOffsetAfter(幻灯片前移偏移) 类型:number 默认:0
设定slide与右边框的预设偏移量(单位px)
(4)free模式/抵抗反弹
①freeMode(自由模式) 类型:boolean 默认:false普通模式
普通模式:slide滑动时只滑动一格,并自动贴合wrapper;
free模式:设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合
②freeModeMomentum(惯性 / 惯量) 类型:boolean 默认:true惯性模式
true模式:自由模式动量,释放slide之后继续惯性滑动
free模式:若设置为false则关闭动量,释放slide之后立即停止不会滑动
③freeModeMomentumRatio(惯性比) 类型:number 默认:1s
设置的值越大,惯性越大,当释放slide时的滑动时间越长
④freeModeMomentumVelocityRatio(惯性速度比) 类型:number 默认:1
free模式惯性速度,设置越大,释放后滑得越快
⑤freeModeMomentumBounce(动量反弹) 类型:boolean 默认:true
false时禁用free模式下的动量反弹,slides通过惯性滑动到边缘时,无法反弹。注意与resistance(手动抵抗)区分
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ freeMode : true, freeModeMomentumBounce : false, }) </script>
⑥resistance(抵抗性) 类型:boolean 默认:true
边缘抵抗,即当swiper已经处于第一个或最后一个slide时,继续拖动Swiper会离开边界,释放后弹回。边缘抵抗就是拖离边界时的抵抗力。值为false时禁用,将slide拖离边缘时完全没有抗力。
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ resistance : false,//完全没有边缘抵抗力 }) </script>
【拓展】:抵抗率
resistanceRatio(抵抗率) 类型:number 默认:0.85
边缘抵抗力的大小比例,值越小抵抗越大越难将slide拖离边缘,0时完全无法拖离
⑦freeModeMomentumBounceRatio(惯性反弹比) 类型:number 默认:1
值越大产生的边界反弹效果越明显,反弹距离越大
⑧freeModeSticky(自由模式粘滞) 类型:boolean 默认:false
使得自由模式也能自动贴合
⑨freeModeMinimumVelocity(自由模式最小速度) 类型:number 默认:0.02
触发自由模式惯性的最小触摸速度(px/ms),低于这个值不会惯性滑动
案例:设置为1后需要触摸很快才能产生惯性
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ freeMode : true,//开启自由模式 freeModeMinimumVelocity : 1,//最小触摸速度 }) </script>
(5)环路 / 循环Loop
①loop(循环) 类型:boolean 默认:false
设置为true 则开启loop循环模式
loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的,并且loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点
②loopAdditionalSlides(循环其他幻灯片) 类型:number 默认:0
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
③loopedSlides(成环幻灯片) 类型:number 默认:1
在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数(一般设置为本来slide的个数)
④loopFillGroupWithBlank(带空白的循环填充组) 类型:boolean 默认:false
在loop模式下,为group填充空白slide;在最后一个slide后面填充了一个空白的slide
(6)progress进度
①watchSlidesProgress(查看幻灯片进度) 类型:boolean 默认:false
开启这个参数来计算每个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的切换而不停的变化,而不是在某个时间点突变。
②watchSlidesVisibility(幻灯片可见性) 类型:boolean 默认:false
开启watchSlidesVisibility选项前需要先开启watchSlidesProgress,如果开启了watchSlidesVisibility,则会在每个可见slide增加一个classname,默认为'swiper-slide-visible'
(7)Clicks点击
①preventClicks(阻止点击) 类型:boolean 默认:true
当触摸拖拽时阻止默认事件(preventDefault),用于防止触摸拖拽时触发链接跳转
<script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ preventClicks : false,//默认true }) </script>②preventClicksPropagation(阻止点击传播/冒泡) 类型:boolean 默认:true
阻止click冒泡,拖动Swiper时阻止click事件
案例:拖动释放时不会输出信息
<div class="swiper-slide" onclick="alert('你点了Swiper')"> <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ preventLinksPropagation : false, }) </script>③slideToClickedSlide(点击过渡) 类型:boolean 默认:false
若设置为true,则点击slide会过渡到这个slide幻灯片
注意:一般适用于设置了slidesPerView(每个视图幻灯片)属性的幻灯片
var mySwiper = new Swiper('#oneContainer', { loop:true, slideToClickedSlide:true, centeredSlides : true, slidesPerView : 3, });
相关推荐
Swiper移动端选项卡切换
触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果 触屏滑动swiper选项卡tab标签切换效果
swiper手机移动端触屏滑动选项卡 Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile ...
swiper7基础轮播详解,最新添加的鼠标移到上面停止轮播,离开自动轮播。总的来说简单好用,前端必备
本文主要介绍了swiper配置选项,包含了轮播的无限滚动、懒加载、监听当前位置、上下翻页、过渡动画渐变、延时加载图片、自动轮播等;
Swiper 轻量的移动端 H5 翻页库,提供了必要的配置选项和 API
uniapp swiper 图片高度根据图片宽度自适应; 通过选项卡跳到锚点位置,类似h5单页面通过a链接导航效果; 滑动到某个要素位置时触发事件,如tab选项卡值更改等
swiper插件及它的使用方法,jquery通过ajax动态获取图片,并将其按规定的规则使用到swiper插件中
本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下 1、scrollbar 为Swiper增加滚动条。类型:object。 2、el scrollbar容器的css选择器或HTML元素。类型:string/HTML Element,...
1.进入项目目录,安装swiper npm install vue-awesome-swiper --save 2.引入资源 //vue滑块 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 3.编辑组件 <swiper :options=...
Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件...
Swiper自定义分页,供大家参考,具体内容如下 最终实现效果图: HTML DEMO(官网例子) <link rel=stylesheet href=path/to/swiper.min.css> <div class=swiper-container> <div class=swiper-wrapper> ...
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
4. swiper的progress值为0-1,当前展示的slide的progress值为0,下一个为-1,上一个为1,以此类推。 5. setTranslate() 当设置wrapper的偏移量时执行。可选swiper对象和wrapper的偏移量作为参数。 6. activeIndex...
swiper插件点击图片查看大图幻灯片效果可左右轮播切换代码,swiper选项卡,swiper滚动,swiper放大
swiper不回弹。swiper无限拉 https://blog.csdn.net/qq_36413371/article/details/104030854
swiper各种滑动demo,还有左右滑动中间嵌入上下滑动,代码简介,案例多,种类全,之后在我的博客里,也会有些swiper滑动使用得介绍(加入动画,左右滑动嵌入上下滑动)
这是一个基于Swiper实现的列表切换效果,与之前做的相比较更加的大气一些,因为增加了一些过渡的动画效果,在移动端的体验更好。