前端|swiper / 移动端触摸滑动插件 / 手机轮播插件前端|前端框架

做移动端一定会遇到触摸滑动的需求，既需要实现左右的或者上下的自动滚动，又要实现手指滑动的功能。使用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数量。

【前端|swiper / 移动端触摸滑动插件 / 手机轮播插件】类型：number默认：1启用版本：4.0.0

slidesPerColumnFill多行布局中以什么形式填充

类型：string默认：column启用版本：4.0.0
可选值为columnrow

freeModefree模式

类型：boolean默认：false启用版本：4.0.0
默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。

looploop模式

类型：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.effectslide的切换效果，默认为"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

- 锐客网 .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; } 页面1 页面2 页面3

运行之后的是

文章图片

这个demo既可以实现自动播放，按钮左右导航，分页导航，还可以实现手指的左右滑动，滑动之后可以再自动播放。
注意：.swiper-container>.swiper-wrapper>.swiper-slide之间不可以加上其他的div，否则会造成轮播的开始和结束出现很长的空白的情况，.swiper-slide下面可以作为一个整体，添加内容。
当需要一个页面上出现多个轮播功能的时候，new Swiper下的容器.swiper-container必须一一对应，每一个都添加一个class名来区分。