Swiper - 开源、免费、强大的触摸滑动插件

Swiper 能实现触屏焦点图、触屏 Tab 切换、触屏多图切换等常用效果。

Swiper 开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

• 插件介绍： 详情
• 插件演示： Demo
• **插件演示：

**Demo

• 插件文档： 详情
• **使用文档：

** 详情

• 插件下载： 详情
• **插件版本：

**5.3.0

Swiper 的结构和基础原理

Swiper 的每个展示块（屏）为一个 slide，slide 中放置图片或文字等展示的内容，全部 slide 排成一行(或多行)包含在包装器 wrapper 中，

而总容器 container 又包裹着 wrapper 和箭头按钮控件 navigation 以及分页器控件 pagination。

当手指（或鼠标）触摸滑动 Swiper 时，Swiper 在浏览器每一帧通过计算滑动的距离差对 wrapper 进行位移（transform）从而产生拖动的效果。

在手指（或鼠标）释放时，计算下一个 slide 的起始位置对 wrapper 设置位移动画（transition），从而产生切换动画效果。

Swiper 拥有灵活的 progress，这是自定义制作 3D 切换效果的利器

Swiper 制作 3D 切换效果的方法多种多样。cube、coverflow 和 flip 可以轻松的实现 3D 过渡，如果你想制作其他新颖的切换方式，推荐使用 progress。

progress 可以帮助你获取到滑块的进度索引。

在 Swiper 上加些小动画，制作时下最流行的微展示

使用 Swiper 再配合一些你喜欢的小动画，你的图片立即变成活灵活现的微场景、微海报。

常用的制作动画的方法有 CSS3、GreenSock、Anime.js、animate.css 等。也推荐使用我们的 Swiper Animate 小插件，无需学习即可快速制作出精美的切换动画效果。

Swiper Animate 有大量的 demo，下载后进行简单修改即可，是伸手党的最爱。

Swiper 5 的特色功能

下载文件中提供 swiper5 完整包，包含 Swiper5 的全部基础演示和未压缩的 js、css 文件