今天给大家分享一个网站Swiper中文网，在开发网页过程中，关于幻灯片这块，我基本都是直接用它的插件，非常好用！
关于Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。
目前，有很多优秀网站都在使用Swiper
具体的可以直接访问官网地址：http://www.swiper.com.cn
|
Swiper优点 |
|
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端 |
|
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果 |
|
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择 |
|
Swiper常用于移动端网站的内容触摸滑动 |
|
Swiper拥有灵活的progress，这是自定义制作3D切换效果的利器 |
|
Swiper制作3D切换效果的方法多种多样。cube、coverflow和flip可以轻松的实现3D过渡，如果你想制作其他新颖的切换方式，推荐使用progress。 |
|
progress可以帮助你获取到滑块的进度索引。 |
例如：watchSlidesProgress
开启这个参数来计算每个slide的progress(进度、进程)，Swiper的progress无需设置即开启。
对于slide的progress属性，活动的那个为0，其他的依次减1。例：如果一共有6个slide，活动的是第三个，从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3。
对于swiper的progress属性，活动的slide在最左（上）边时为0，活动的slide在最右（下）边时为1，其他情况平分。例：有6个slide，当活动的是第三个时swiper的progress属性是0.4，当活动的是第五个时swiper的progress属性是0.8。
swiper的progress其实就是wrapper的translate值的百分值，与activeIndex等属性不同，progress是随着swiper的切换而不停的变化，而不是在某个时间点突变。
|
watchSlidesProgress参数 |
|||
|
类型： |
boolean |
默认： |
false |
|
举例： |
true |
启用版本： |
4.0.0 |
更多功能，可以直接访问官网：Swiper中文网 [http://www.swiper.com.cn]
Swiper 4 的特色功能
|
不依赖框架： |
Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等 |
|
1:1的触摸滑动： |
Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。 |
|
监视器： |
Swiper可以通过设置开启监视器，有了这个功能Swiper可以在你动态改变Dom或Swiper的样式时自动重新初始化并计算所需的元素。 |
|
丰富的API： |
Swiper 拥有丰富的API，允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果 |
|
多行slides布局： |
Swiper允许多行Slides布局，这样每行的slide就会较少。 |
|
过渡效果： |
增加了三种新的过渡效果：淡入、3D方块、3D流。 |
|
Flexbox网格： |
你可以在Swiper初始化的时候设定slide的显示，包括每行、每列、每组数量以及他们的间距等。 |
来源：雷小胖
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！