swiper

Swiper 常用于移动端网站的内容触摸滑动
Swiper 是纯 JavaScript 打造的滑动特效插件，面向手机、平板电脑等移动终端。

swiper.js 在国内使用面非常广，可以用于实现轮播、图片预览、可滚动应用等，发挥想象可是实现诸多需求。

本篇幅采用 swiper5，所有版本的 api 都很相似，主要区别可以参考官方的提供的说明。

1. 使用

swiper 需要引入两个资源，通常和 UI 相关的框架都会有两个及以上资源，需要额外引入样式。

轮播是非常常见的需求，只需一些简单的 DOM 结构就可以完成。

.swiper-wrapper 和 .swiper-slide 两个类是和 swiper 联动的，swiper 在初始化的时候会在 swiper-wrapper 下 swiper-slide 作为每一项，这些类名都是可通过配置修改的。

2. 使用 swiper 实现移动端的图片预览

移动端产品的图片查看几乎都是全屏预览，可以作用滑动切换图，支持缩放手势等，swiper 天然支持这些功能，同时又可以深度定制，适合制作业务组建嵌入项目。

分析一下需求：点击图片查看大图，图片可以手势缩放，同时支持左右切换。

其实这就是一个不会自动切换的轮播，通过 swiper 就能实现。

可以设计一个方法，方法接收 当前图片和所有图片列表，然后每个图片为一页，生成一个轮播，显示在页面的最上层。

源码没有跳着走的逻辑，都加上了注释，相对好理解。

这个图片查看方法利用了 swiper 提供的滚动、手势缩放、手势拖动、分页的能力，实现相对简单，如果需要自己去实现相应功能，就需要花费大量的经历。

3. 小结

swiper 本身的定位并不是轮播，轮播是其应用场景之一，发挥想象，可以用 swiper 做许多事情。