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

本文共914 个字, 需约3 分钟阅读。本文最后更新时间为2024年11 月7日, 部分内容具有时效性,如有失效请留言告知，阅读量:2,476 阅读

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

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

• 插件介绍： 详情
• 插件演示： Demo
• 插件演示：Demo
• 插件文档： 详情
• 使用文档： 详情
• 插件下载： 详情
• 插件版本：swiper-11.0.3.zip

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 的特色功能

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