在之前给大家分享过一款移动端的内容滑块插件《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" 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" rel="external nofollow" rel="external nofollow" ></a>
<a class="arrow-right" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="//static.jiawin.com/uploads/2015/01/05142321afe81f00b1a4495.png"> </div>
<div class="swiper-slide"> <img src="//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/" rel="external nofollow" >觉唯网</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。
请问 07-centered.html 第7款DEMO，增加loop: true之后，往右滑动到第7张左边会看不见，再滑动一下又有了，怎么能像往左滚动一样顺滑？
请问这个里面的代码怎么下载？
下载附件，或者到官方网站下载就可以
楼主 我想 问哈 这个组件可以实现 上啦加载 下拉刷新吗？
楼主你好。我想问下，当幻灯片滑到尽头（即第一张时往右拉，最后一张时往左拉），但是禁止loop循环播放情况下，这时候拉动幻灯片会再往拉的方向去一点，露出空白（因为已经是最后一张），再回到原位。
）
我希望的是，已经拉到尽头而且禁止循环的情况下，不能拉过头，紧紧贴住边，不知这个功能是否已经有了？求解答 （不知我的描述楼主能看懂不…
你说的应该是禁止惯性回弹效果，可以试下 freeModeMomentumBounce: false 。具体可以看官网API http://idangero.us/swiper/api/#.V5hAtJN96u4
试过了，还是会滑过头…
求救！ Uncaught ReferenceError: Swiper is not defined 是什么情况？
你好楼主，用了swiper有一段时间了，一直想知道它的原理，不知道是怎么切换div显示的，楼主可否稍微指点一二，感激不尽。
或者简单说需要哪些知识，我去学习一下。
管理员你好！这个切换的下面的小圆点的距离怎么控制呢？用什么样式控制！谢谢答复！
带分页器的切换，在同一个页面使用多次效果，出现切换不正确是怎么回事，上面的四张图片显示三个分页，下面的三张图片显示四个分页并且分页切换锁定不了都是一个颜色只有切换！在线求教！谢谢管理员回复！
滑动一下就不自动播放了！怎么设置滑动完还能自动播放？
autoplayDisableOnInteraction : false当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
13-threshold.html 案例中，是不是不能出现两个幻灯片？如果可以的话，怎么弄，一个是width：100%；一个是width：600px，而且同时出现在一个页面里面？大神求教，在线等？
还有就是，案例中，19-chaining.html，里面有写两个一起的，但是里面有两个bug：
第一，第二个幻灯没有圆点按钮；
第二，点击第一个幻灯圆点按钮，只能控制第二个的幻灯；
第三，点击第一个幻灯左右按键，第一个圆点没有切换；
第四，点击第二个幻灯左右按键，第一个圆点按钮居然切换了；
19-chaining中确实存在这个问题，可以查看new Swiper（container,options）这个API，其中的“ container”为选择器。有多个幻灯片，就写多个new Swiper就行，用不同的id区分开来。
demo18下拉刷新 为什么在“”外面再套一个div时，页面就不能往上滑动了“<div class="swiper-wrapper" style="padding-top: 0px; padding-bottom: 0px; transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); ”里的translate3d的第二个值一直为0，不能记录最新的Y值，求解
是否有报错？
莫有报错 就是不管上拉还是下拉，页面都不动
$(function(){
var divHeight = ($(window).height()-115);
$(“.swiper-container”).height(divHeight);
});页面加载完成后，执行这段JS，给swiper-container重新定义了高度，但上拉到底部时，后面的几条数据还是展示不出，不是被底部遮住的，而是在上拉过程中最后的数据能看到，但上拉完成后，数据 又不见了
demo18 里的swiper-container高度为什么一定要设置成height:100% 一般在手机端的页面里都会有一个头部和底部，而且底部一般是绝对定位的，现在swiper-container里height:100%，再加一个绝对定位的底部，页面里的内容就一直展示不完全，改成height:auto时，又会出现最开始的问题，上下拉，页面都不动，请问，有什么方法可以解决这个bug
不一定是100%，只要给个具体的高度值就可以。可以通过js计算除去头部底部的高度，然后赋值给swiper-container的height
终于好了，这个千年BUG，把这个计算高度的JS换了一个位置，谢谢
作者做的挺辛苦，不过美中不足的是，拿来用，画面不太美，因为你为了固定的宽度与高度，在手机里面是不适用的，所以，最后不得不跑去它的英文网站下载案例。
楼主你好！我想问下这个插件用在手机端上面，在苹果上面还好不卡。但是在安卓上面就会有点卡！如果加载图片多了的话，还有音乐等就会很卡。哟解决办法么？
怎么回调函数？
可以查看官方AIP，有各种回调函数的方法。例如：onTouchStart、onTouchMove、onTouchEnd、onSlideReset
不能自适应高度
是可以自适应高度的。通过css实现。
根据内容读取 http://www.swiper.com.cn/api/basic/2014/1217/28.html
这个评论框不实用，评论按钮会遮住文字
感谢反馈，会一直改进用户体验。
我用emulation 模拟移动端的浏览器，怎么不滑动呢？只能点击小按钮来左右移动！
emulation chrome ? 应该是可以的。支持触摸手势以及电脑鼠标滑动。你看下是否有报错之类的。
还有一个问题怎么设置自动播放，不用滑动，自动播放！
请看官方的API，有对应说明的参数设置方法。
如：autoplay:3000
小巧而强大，而且Swiper中文网上还有全部的API示例，入门很轻松呀
牛逼！终于手机解决的滑动问题了。另外，这个网站的手机版阅读很舒服。大赞！
您也可以使用第三方帐号登录
您也可以使用第三方帐号快捷注册