swiper

118 阅读2分钟

swiper插件

是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果,源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

使用方法

导入文件

首先这个插件和其他的插件一样要引入文件,不同Swiper版本用到的文件名略有不同。在package文件夹下找到下面这四个文件放入项目里就可以了

1695644396753.jpg

导入这两个文件就课使用swiper。 1695644578258.jpg

添加html部分

1.swiper-container最外层的div是一个容器

2.swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合,在默认情况下是从左到右排列

3.swiper-slide: 你的每 张轮播图

4.swiper-pagination是分页器导航,也就是下图所显示的原点

5.swiper-button-prev swiper-button-next 插件默认的按钮左右箭头 6.swiper-scrollbar滚动条 在swiper官网可以查找到代码直接复制使用

1695644788965.jpg 在写完html代码后我们还需要对这个轮播图进行初始化

1695644905123.jpg

这个初始化有两个参数 第一个参数: Swiper容器的css选择器,当然你也可以把swiper-container换成任何你自定义的名字 第二个参数: Swiper的个性化配置。 (是以一个对象的形式传参数的)

常用的API

navigation(前进后退按钮)

1695645057624.jpg

1695645085656.jpg swiper-button-nex找 nextEl 下一张.swiper-button-prev找 prevEl 上一张

autoplay(自动轮播) 1695645312947.jpg

1695645391541.jpg delay: 自动轮播的时间,延时多少秒切换下一张图片 disableOnInteraction. 在设置false时,你对轮博图操作不会停上循环,而true,在你对轮博图操作时会停止自动轮播

1695645461256.jpg

mySwiper.autoplay.stop() mySwiper.autoplaystart(一个开始轮播,一个暂停轮播,不多说,那个mySwiper应该是可以修改的,名字是你初始化的swiper名字。