何为Swiper？Swiper是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps)，主要是为了IOS而生的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的体验。Swiper的特征：1.触控运动，这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件。2.水平滑动(horizontal)垂直滑动(vertical)自由运动(无定位用于点击以及拖曳滑块) 旋转运动(能够无限循环)。3.滑动容器，该特征下Swiper能在一些简单的滑块区域里没有slides。4.任意标签，Swiper可以将任一HTML内容放在slide里，不只限于图像。5.如果移动设备支持的话，Swiper拥有硬件加速的功能，能够得到良好流畅的动画效果，尤其在IOS设备中得到更好的体现。6.丰富的API，Swiper支持丰富的API接口，可以实现更多的动画切换功能以及视觉效果。7.良好的兼容性，Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及谷歌浏览器（Chrome），Safari，火狐浏览器（Firefox），IE10+以及欧朋浏览器（Opera）等等。
Swiper的结构，我们用一张最直接了当的图来了解Swiper：
使用Swiper的时候我们一般都会引用Jquery文件，例如：
<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var mySwiper = $('.swiper-container').swiper({
mode : 'vertical', //选择垂直模式，
speed : 500, //设置动画持续时间500ms
freeMode : true, //开启自由模式
freeModeFluid : true, //开启'fluid'自由模式
onTouchStart : function() {
//触控滑块时执行代码
alert('OMG you touch the slide!')
}
}
})
</script>
返回拥有众多有用函数（functions）以及方法(methods)的对象:
mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮（mousewheel control）控制 mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮 mySwiper.enableKeyboardControl()-滑动中键盘控制可用 mySwiper.disableKeyboardControl()-禁用滑动中键盘控制 mySwiper.swipeNext()-执行过渡动画到下一滑块（slide）(简单来说就是滑动到下一个页面) mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10 mySwiper.browser.is8 -返回 “true”如果浏览器为IE8 mySwiper.support.touch -返回 “true”如果浏览器支持触屏 mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形) mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形) mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡) mySwiper.activeIndex- 返回当前活动块的索引（number） mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引（number） mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引（number） mySwiper.previousIndex- 返回上一个活动块的索引（number） mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮 mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮 mySwiper.resizeFix()-调用这个方法当你改变swiper's 的尺寸而没有改变窗口大小时。 mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。 mySwiper.width 返回Swiper容器的宽度 mySwiper.height返回Swiper容器的高度 mySwiper.isTouched 返回布尔值，当触控该slide时返回“true” mySwiper.positions - 返回包含x,y坐标的wrapper对象 mySwiper.touches - 返回包含触控信息的对象数组 mySwiper.params - 获取对象初始化参数，能够在初始化之后改变/重写该参数，如： mySwiper.params.speed = 500;mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform's translate 的值。x,y and z - 为数字