下面根据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 是一款非常流行的开源JavaScript库,主要用于移动设备上的触摸滑动效果,尤其适用于创建滑动轮播图、选项卡切换、页面滑动导航等。在移动端应用开发中,Swiper 的选项卡切换功能能够帮助用户更流畅地浏览和...
下面将详细讲解 Swiper7 的基本概念、功能、配置选项以及如何实现描述中的“鼠标移到上面停止轮播,离开自动轮播”效果。 一、Swiper7 基本概念 1. **Slide**: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 ...
最后,我们创建一个新的Swiper实例,传入`.swiper-container`选择器以及所需的配置选项,如自动播放、分页器、箭头导航等。 Swiper的配置项非常丰富,例如: ```javascript var swiperConfig = { slidesPerView: ...
总的来说,Swiper 是一个功能强大且灵活的移动端H5翻页库,它的配置选项和API使得开发者能够轻松实现各种滑动效果,提升移动端网页的互动性和用户体验。无论你是前端新手还是经验丰富的开发者,Swiper 都是构建高...
在Swiper的配置选项中,可以通过设置3D效果参数,如perspective值和模拟3D空间的参数,来调整旋转的视觉效果。 循环旋转特效则是Swiper的一个常见功能,它允许图片或内容在到达最后一项后无缝返回到第一项,形成一...
3. **初始化Swiper**:在JavaScript中,使用`new Swiper()`方法实例化一个Swiper对象,传入容器ID和其他配置选项。 4. **配置选项**:Swiper有许多可配置的选项,例如`autoplay`用于设置自动播放,`pagination`用于...
Swiper提供了丰富的API和配置选项,允许开发者自定义滑动行为、动画效果、导航箭头、分页器等。 在"swiper轮播图demo"中,关键的技术点有: 1. **多列布局**:Swiper支持多列布局,这意味着可以在一个屏幕上显示多...
Swiper是一款功能强大且流行的滑块插件,它提供了丰富的配置选项和api,能够满足各种滑块需求。Swiper的自定义分页器是其一个重要的配置项,它能够让开发者自定义分页器的样式和行为。本文将详细介绍Swiper自定义...
Swiper基于JavaScript,它提供了丰富的API和配置选项,可以定制各种滑动效果。在Swiper 7.4.1版本中,双向控制功能意味着你可以设置两个轮播实例,当一个轮播滑动时,另一个轮播也会相应地更新其位置。这可以通过...
`loop`选项是实现无限循环的关键,它默认为`false`,当设置为`true`时,Swiper会在最后一项和第一项之间创建虚拟复制的幻灯片,从而实现无限循环。如果`loop`设置正确,但仍然出现不回弹的情况,可能有以下原因: 1...
综上所述,Swiper幻灯片插件凭借其强大的功能和丰富的定制选项,成为了现代Web开发中不可或缺的工具之一,为网站和应用带来了更丰富的用户体验。通过熟练掌握Swiper的使用,开发者能够创建出更具吸引力的交互式内容...
2. 配置选项:在初始化时,我们可以通过配置对象设置Swiper的行为。例如,对于tabs效果,我们可能需要设置`slidesPerView: 'auto'`以允许单个视图显示一个slide,以及`loop: false`关闭循环滑动。 ```javascript ...
Swiper 是一款流行的JavaScript轮播库,用于创建滑动效果,如轮播图、滑动菜单等。在本文中,我们将深入探讨如何使用Swiper来实现一个特定的效果:当轮播到某一张图片时,该图片会放大显示,类似于芒果TV或货拉拉...
然后,初始化 Swiper 实例,设置相应的配置选项。为了实现卡片效果,我们需要启用 `effect: 'coverflow'` 选项,并可能调整其他相关参数,如 `slideShuffle` 和 `rotate`。在 JavaScript 中,这可以这样实现: ```...
Vue-Awesome-Swiper 滑块插件使用方法详解 Vue-Awesome-Swiper 是一个基于 Vue.js 的滑块插件,提供了灵活的滑块解决方案。下面是 Vue-Awesome-Swiper 滑块插件的使用方法详解。 安装 Vue-Awesome-Swiper 首先,...
2. **滑动方向控制**:通过配置选项,可以指定滑动的方向,比如`direction: 'horizontal'`表示水平滑动,`direction: 'vertical'`表示垂直滑动。 3. **滑动事件监听**:Swiper提供了多种事件,如`...
- **docs**:文档文件,详细介绍Swiper的使用方法、API和配置选项。 - **许可证文件**(LICENSE):阐述Swiper的开源许可协议,通常是MIT或GPL。 - **其他辅助文件**,如README.md,介绍Swiper的基本信息和安装步骤...
下面我们将深入探讨Swiper的核心特性、配置选项以及如何实现横向循环焦点图片。 Swiper的主要特点包括: 1. **响应式设计**:Swiper适应不同设备和屏幕尺寸,支持自适应布局。 2. **触摸滑动**:原生的触摸滑动...