在之前给大家分享过一款移动端的内容滑块插件《Swipe JS – 移动WEB页面内容触摸滑动类库》，但该插件存在几个缺点，导致使用起来有点困难。很多同学都来问觉唯，该怎么解决呢？那么觉唯就为大家解决这个问题，解决方案是使用另外一个功能极其强大的插件：Swiper – Mobile touch slider and framework with hardware accelerated transitions。按照觉唯惯例，demo先送上，一共有19个演示效果，大家可以前往体验。
Swiper是由iDangero.us开发的一款免费移动端触摸滑块幻灯片插件，不但能够适用于各种操作系统的手机，还能够利用HTML5的硬件加速功能来完成滑块的切换效果，其效果以及实用性非常强。该插件原主要适用于iOS的设计，但也适用于Android、Windows Phone和最新的桌面浏览器，当然也可以使用在APP上，如微信、QQ等等。
一、Swiper的特点
下面就为大家介绍下该插件的特点：
1、1:1 触控运动
Swiper默认为1:1的触控距离，比率可以自定义。
2、触控模拟
能让鼠标也支持触摸滑动效果，可以在PC端也能滑动起来，也就是支持在电脑端鼠标滑动。
3、水平或垂直
有两种运动模式，horizontal(水平滑动)以及vertical（垂直滑动）。
4、自由模式
能够让slides无需定位，就像通常的滑动条。（可以在演示地址体验）
5、旋转调整
Swiper 在移动设备旋转后可以自适应尺寸，可以自动根据设备旋转和缩放。
6、响应式布局
slides的高度使用百分比来设置，从而解决不同移动端的适配。
7、滑动阻止
会自动限制一种模式，水平或者垂直。
8、滑块反弹
反弹机制，当滑块到达最左或者最右（最上或者最下）的位置时，会触发回弹效果。
9、原生动态
使用原生的转换效果，html5动画属性。
10、内置分页控制
能自动生成分页控制机制，可以指定控制器的标签pagination。
11、自动播放
Swiper可以设置自动播放，以及自动播放的延迟时间。
12、循环模式
可以自由设置开启和关闭，开启后，能够无限的播放幻灯片，到了最后一个位置时，会切换回第一个（无缝切换）。
13、旋转模式
能够让你在slides父容器下设置你所需要展示的slides数量来旋转播放。
14、滚动容器
该功能可以在容器里面滚动内容（不是指幻灯片，而是幻灯片里面的内容滚动），特别适用于APP的开发效果。
15、嵌套幻灯片
能够将swiper嵌套入各种不同的Swiper的slide里面，例如第一个slide里面可以放在一个水平的，而第二个slide里面可以放置垂直的。
16、放置HTML标签
该幻灯片插件，不只是允许放置图片标签，而且可以放置任意的HTML标签，例如文本、视频等等。
17、硬件加速
swiper可以使用设备硬件加速技术，能大幅度的改善动画效果以及优美的流畅性，特别是在IOS系统里面表现的更加完美（硬件加速需要设备支持）。
18、丰富的API接口
swiper拥有着非常丰富的api接口，例如：onTouchStart、onTouchMove、onTouchEnd、onSlideSwitc、autoplay等等。
19、灵活的配置
Swiper在初始化的时候能够接受多个参数，可以非常灵活的配置插件的效果。
20、插件API
Swiper从1.7版本开始就变的更加强大，因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)（该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar）。
21、良好的兼容性
Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌浏览器（Chrome），Safari，Firefox，IE10 以及欧朋浏览器（Opera）。
22、对IE的兼容
能够兼容IE7以上的版本，在IE7中使用的DOM动画，而非css transitions切换，所以需要引入jQuery。
23、独立性
Swiper不依赖像jQuery那样的js类库，这样子Swiper会更加的小型以及快速，从而使用不同的手机设备环境。但Swiper也能很安全地应用诸如jQuery、jQuery Mobile，jQTouch等等其他的js类库。
24、超轻量级
压缩后仅仅10KB左右，独立运行，不依靠第三方类库。
看完之后是不是感觉很激动？基本上此插件可以完成大部分的移动滑块的需求了。
二、Swiper的使用
那么接下来就跟大家说下简单的用法，首先引入核心文件js，以及自带的默认css样式表：
<link rel="stylesheet" href="../dist/idangerous.swiper.css" rel="external nofollow" > <script defer src="../dist/idangerous.swiper.min.js"></script>
HTML结构以及插件初始化配置：
<div class="device">
<a class="arrow-left" href="#" rel="external nofollow" rel="external nofollow" ></a>
<a class="arrow-right" href="#" rel="external nofollow" rel="external nofollow" ></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="http://static.jiawin.com/uploads/2015/01/05142321afe81f00b1a4495.png"> </div>
<div class="swiper-slide"> <img src="http://static.jiawin.com/uploads/2015/01/05142321afe81f00b1a4495.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>在这里放置任意html，例如html文本、视频。</p>
<p><a href="http://www.jiawin.com/">觉唯网</a>，推崇以用户为中心的设计理念，致力于为设计爱好者提供一个良好的学习交流平台。</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
插件初始化配置：
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
通过上面的代码输出，就可以使用这个插件了。操作使用起来还是挺方便的，代码也不会很复杂。
关于这个插件的更多API使用方法以及参数，大家可以前往官网查询：http://www.idangero.us/sliders/swiper/api.php。
原文：http://www.jiawin.com/swipe-mobile-touch-slider