Swiper.js使用教程

上个礼拜，通过在制作公司产品介绍弹出框的过程，使用了强大的Swiper.js,官网地址：(http://www.swiper.com.cn/)。

一、Swiper.js简介：

Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及PC端的浏览器也有着良好的用户体验。

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

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

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

更多的介绍可以去官网地址：http://www.swiper.com.cn/查看。

也可以戳这里查看demo：http://www.swiper.com.cn/demo/index.html#

二、Swiper.js的版本区别

1、Swiper.js 3.x的版本。其主要适用对象为手机、app、webapp等移动终端。Swiper.js 3.0版本所采用了比较多的html5与CSS3的新特性，因此对PC端的浏览器兼容性并不是非常好，尤其是IE。在IE9以下（IE10没有测试过），Swiper.js 几乎等同于没有用，一点效果都没有。因此Swiper.js 3.0最适合用于移动端。

2、Swiper.js 2.x版本。Swiper.js 2.x版本对PC端的浏览器兼容性比较好，甚至支持IE7。其中的滑动效果在IE8都可以完美的运行。

具体看demo：http://swiper2.swiper.com.cn/demo/index.html

三、Swiper.js 有趣的功能

1、使用过程中，觉得Swiper.js能整合强大的css3动画效果插件：animate.css，详情请戳：http://daneden.github.io/animate.css/。Swiper.js结合Animate.css可以实现强大的动画效果，几乎无所不能。如果Animate.css的动画效果你不满意，你完全可以自己添加动画，用起来简直太棒了。

关于Animate.css的详细教程已经有人写得非常详细了，这里也就不累赘重复写了，直接转载地址：

css3动画简介以及动画库animate.css的使用