做移动端一定会遇到触摸滑动的需求，既需要实现左右的或者上下的自动滚动，又要实现手指滑动的功能。使用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之后自动切换不会停止，每次都会重新启动autoplaydisableOnInteraction: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名来区分。

swiper / 移动端触摸滑动插件 / 手机轮播插件相关推荐

boostrap 鼠标滚轮滑动图片_BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)...
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项 ...
Bootstrap JavaScript插件：轮播插件 (carousel.js)
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址
【Bootstrap学习笔记】12.轮播插件
#十八.轮播插件 ##学习内容轮播插件轮播插件-框架结构轮播插件-基本结构轮播插件-自动播放轮播插件-JS方式实现自动播放轮播插件-方法轮播插件-事件 ● 轮播插件(Carousel) ...
一款好用的轮播插件swiper，适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"><div cla ...
轮播移动端 html,移动端h5如何使用轮播插件swipe
移动端h5如何使用轮播插件swipe 发布时间:2020-07-16 15:36:34 来源:亿速云阅读:100 作者:Leah 本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼 ...
vue-cli3.0移动端使用的轮播插件
前言: 因为移动端项目的需要,我在项目中经过考虑使用的mint-ui的框架,但是使用他提供的swiper插件以后,感觉坑太多,填不动的感觉,故经过查找并实际测试,发现一款使用挺好的swiper插件 v ...
swiper轮播插件的使用
swiper轮播插件的使用引入js文件 <script src="./js/swiper-3.4.2.min.js"></script> 接收后台返回的轮 ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...
swiper.js横向轮播插件
下载地址使用swiper.js轮播插件构造的图片切换效果,点击左右箭头切换图片,不错的图片横向轮播插件. dd:

swiper / 移动端触摸滑动插件 / 手机轮播插件

Swiper构造函数

Swiper构造函数

swiper / 移动端触摸滑动插件 / 手机轮播插件相关推荐

最新文章

热门文章