触摸内容滑动插件swiper的基本操作与应用

发布时间：2018-01-25 18:20:28

发布者：565633147

浏览量:

说起目前应用较广泛的移动端网页触摸内容滑动插件你想到的是什么呢？

相信大多数人应该都能想到swiper 。

开源 ,免费,强大的触摸滑动功能是它身上很明显的标签。

QQ图片20180125181815.png

也是因为麒麟小镇这个项目了解并慢慢熟悉swiper的。

那么今天我们就一起来了解一下这款功能强大的插件吧。

首先加载插件一定需要用到它本身的一些文件，而swiper需要引进下面的两个文件

或者也可以直接引用cdn提供的swiper链接

引入文件之后，需要按照官方提示的方法进行调用

html页面这样的调用

里面包括了free模式、网格分布、切换效果、触发条件，点击。。。

这里就不一一赘述啦，今天就了解一下swiper关于常用的一些参数。

调用swiper的时候需要进行初始化，然后在里面添加你需要的属性。

现在就来认识下面的属性：

滑动方向：横向（horizontal）/竖向(vertical) ，默认是横向切换

滑动速度 speed 单位：ms 指slide从开始到结束的时间

初始化slide 的索引 initialSlide：数字设定页面加载完成时，第几张图片先显示

循环播放 loop：true/false

direction : 'vertical',

是否自动切换：autoplay true/false 默认不自动切换

切换效果：effect ----- 常用的slide（位移） fade （淡入） cube （方块） flip(翻转) coverflowEffect(3d流)

fade效果为true时 slide透明度1->0（淡出） 0->1（淡入）

cube 效果 slideShadows ：true/false 是否开启slide阴影 shadowOffset (投影距离）单位：px /shadowScale（投影缩放比例）

flip效果它也有阴影参数和cube一样此外还可以限制最大旋转角度（limitRotation ）180° ：true/false 默认是true

coverflowEffect效果 rotate 旋转角度 (默认50) 、同样带有阴影功能还有slide的拉伸值（stretch）默认为0 类似间距

depth是每个slide的位置这里是以z轴为点默认为100 。

分页 pagination ----- 一种是默认的（半透明）还有一种自定义的（上面带数字）

前后退键 navigation----nextEl以及prevEl

滚动条 scrollbar

显示方式slidesPerView：数字可以自己填写表示slide里面显示个数

滑块之间持续时间 speed

每个slide之家的间隙 spaceBetween

鼠标状态 grabCursor：true/false

是否可以点击 clickable:true/false

自动高度 autoHeight ：true/false 根据slide的高度调整

多行布局里每行的slide的数量 slidesPerColumn。

那么如果你想在同一个页面多次调用swiper，为了避免混乱，建议给每个调用添加父类或者同级再定义一个类。

可以参考一下这篇针对同一页面swiper的多次调用办法的文档https://www.cnwenhui.cn/html/show-799.html

上一篇：如何使用jQuery完成复选框的全选和全不选？

下一篇：高度设100%无效解决办法

关键词:

2019-08-08

睢宁县工商业联合会查看详情