做移动端一定会遇到触摸滑动的需求,既需要实现左右的或者上下的自动滚动,又要实现手指滑动的功能。使用swiper 插件就可以完全的满足这个功能,swiper 是开源、免费、强大的触摸滑动插件,使用也很容易上手!
swiper 官方中文网 https://www.swiper.com.cn/
swiper api文档 https://www.swiper.com.cn/api/index.html
swiper 下载地址 https://www.swiper.com.cn/download/index.html
Swiper构造函数
new Swiper(swiperContainer, parameters)
构造函数有两个主要参数:
swiperContainer
Swiper容器的css选择器,HTMLElement or string,必选。例如“.swiper-container”。
一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container
parameters
Swiper的个性化配置,object类型,可选,详细配置如下:
- initialSlide 设定初始化时slide的索引。
类型:number 默认:0 启用版本:4.0.0
设置这个参数,可以让第一个页面的显示不一定是索引为0 的。
- direction 滑动方向,可设置水平(horizontal)或垂直(vertical)。
类型:string 默认:horizontal
-
speed 切换速度
slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间。
类型:number 默认:300 启用版本:4.0.0
-
grabCursor 指针形状
设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)
类型:boolean 默认:false
- parallax 设置为true开启视差效果。
效果可以应用于container或slide的子元素。当应用于container的子元素(常用于视差背景图),每次切换时视差效果仅有设定值的slide个数-1分之1
- autoHeight 自动高度
设置为true时,wrapper和container会随着当前slide的高度而发生变化。即高度随内容变化
- uniqueNavElements 独立分页元素
类型:boolean 默认:true
控制组件放在container外面的时候,需要用到。
- nested 用于嵌套相同方向的swiper时,当切换到子swiper时停止父swiper的切换。
类型:boolean 默认:false 启用版本:4.0.0
请将子swiper的nested设置为true。
由于需要在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效。
- on 注册事件,Swiper4.0开始使用关键词this指代Swiper实例。
类型:object 启用版本:4.0.0
- init 初始化
类型:boolean 默认:true 启用版本:4.0.0
当你创建一个Swiper实例时是否立即初始化。如果禁止了(设为false),可以稍后使用mySwiper.init()来初始化
- preloadImages 默认为true,Swiper会强制加载所有图片。
类型:boolean 默认:true 启用版本:4.0.0
-
centeredSlides 设定为true时,active slide会居中,而不是默认状态下的居左。
类型:boolean 默认:false 启用版本:4.0.0
- slidesPerView 设置slider容器能够同时显示的slides数量(carousel模式)。
类型:number or auto 默认:1 启用版本:4.0.0
- slidesPerGroup 在carousel mode下定义slides的数量多少为一组。
类型:number 默认:1 启用版本:4.0.0
- spaceBetween 在slide之间设置距离(单位px)。
类型:number 默认:0 启用版本:4.0.0
-
slidesPerColumn 多行布局里面每列的slide数量。
类型:number 默认:1 启用版本:4.0.0
- slidesPerColumnFill 多行布局中以什么形式填充
类型:string 默认:column 启用版本:4.0.0
可选值为column row
- freeMode free模式
类型:boolean 默认:false 启用版本:4.0.0
默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。
- loop loop模式
类型:boolean 默认:false 启用版本:4.0.0
设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。
- preventClicks
类型:boolean 默认:true 启用版本:4.0.0
当swiper在触摸时阻止默认事件(preventDefault),用于防止触摸时触发链接跳转。
-
noSwiping
类型:boolean 默认:true 启用版本:4.0.0
设为true时,可以在slide上(或其他元素)增加类名'swiper-no-swiping',使该slide无法拖动(但是可以通过组件切换),希望文字被选中时可以考虑使用。
该类名可通过noSwipingClass修改。
- noSwipingSelector 设置不可触摸滑动的元素,例如input
类型:string
- allowSlidePrev 设为false可禁止向左或上滑动。
类型:boolean 默认:true 启用版本:4.0.0
- observer 监视器
类型:boolean 默认:false 启用版本:4.0.0
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新。
- wrapperClass 设置wrapper的css类名。
类型:string 默认:swiper-wrapper 启用版本:4.0.0
-
slideClass 设置slide的类名。
类型:string 默认:swiper-slide 启用版本:4.0.0
- init 回调函数,初始化后执行。
启用版本:4.0.0
-
autoplay 回调函数,在slide自动切换开始时执行。
类型:function 启用版本:4.0.0
-
mySwiper.realIndex 返回当前活动块(激活块)的索引。在loop模式下不会将复制的块的数量计算在内
启用版本:4.0.0
-
mySwiper.allowTouchMove 设置/查看是否禁止触摸滑动。
启用版本:4.0.0
-
mySwiper.slideNext() 滑动到下一个滑块。
启用版本:4.0.0
-
mySwiper.slidePrev() 滑动到前一个滑块。
启用版本:4.0.0
-
mySwiper.slideTo() Swiper切换到指定slide。
启用版本:4.0.0
Swiper构造函数
1.autoplay 设置为true启动自动切换,并使用默认的切换设置。
类型:object/boolean 启用版本:4.0.0
delay 自动切换的时间间隔,单位ms
disableOnInteraction 用户操作swiper之后,是否禁止autoplay。默认为true
mySwiper.autoplay.start() 开始自动切换。一般用来做“Play”按钮。
mySwiper.autoplay.stop() 停止自动切换。一般用来制作“pause”按钮。
2.effect slide的切换效果,默认为"slide"(位移切换),可设置为'slide'(普通切换、默认),"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)。
类型:string 默认:slide 启用版本:4.0.0
3.pagination 分页器
类型:object 启用版本:4.0.0
el 分页器容器的css选择器或HTML标签
type 分页器样式类型,可选‘bullets’ 圆点(默认)‘fraction’ 分式 ‘progressbar’ 进度条‘custom’ 自定义
clickable 此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
progressbarOpposite 使进度条分页器与Swiper的direction参数相反,也就是说水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
renderBullet 渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。
4.navigation 前进后退按钮
类型:object 启用版本:4.0.0
nextEl 前进按钮的css选择器或HTML元素。
prevEl 后退按钮的css选择器或HTML元素
hideOnClick 点击slide时显示/隐藏按钮。
以上并不是所有的配置参数与组件,仅仅选取了官网的部分。
这是一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<style>
.swiper-container{
background-color: #31A3F5;
border:1px solid #31A3F5;
height: 30vh;
text-align: center;
width: 100vw;
color: white;
font-size: 50px;
}
.swiper-slide{
line-height: 30vh;
}
.swiper-button-prev{
color: white;
}
</style>
</head>
<body>
<!--swiperContainer : Swiper容器的css选择器,HTMLElement or string,必选。例如“.swiper-container”。-->
<!--parameters : Swiper的个性化配置,object类型,可选。-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">页面1</div>
<div class="swiper-slide">页面2</div>
<div class="swiper-slide">页面3</div>
</div>
<!--分页器-->
<div class="swiper-pagination"></div>
<!--导航按钮-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script type="text/javascript">
// new Swiper(swiperContainer, parameters)用于初始化一个Swiper,返回初始化后的Swiper实例
var mySwiper = new Swiper('.swiper-container',{
// direction: 'vertical', //上下滑动
autoplay:{
// disableOnInteraction设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay
disableOnInteraction:false,
delay:10000,//滑动的间隔,轮播的间隔,以ms为单位,这里是10s滚动一次
},
// loop设置为true。会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。
loop:true,
// 使用分页导航
pagination:{
el:'.swiper-pagination',
clickable :true,
},
// 导航按钮
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
});
</script>
</html>
运行之后的是
这个demo既可以实现自动播放,按钮左右导航,分页导航,还可以实现手指的左右滑动,滑动之后可以再自动播放。
注意:.swiper-container>.swiper-wrapper>.swiper-slide之间不可以加上其他的div,否则会造成轮播的开始和结束出现很长的空白的情况,.swiper-slide下面可以作为一个整体,添加内容。
当需要一个页面上出现多个轮播功能的时候,new Swiper下的容器.swiper-container必须一一对应,每一个都添加一个class名来区分。