Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的触摸移动，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。

官网：
github：

　　要实现Swipe的滑动和手势非常简单，仅需要遵循一个简单的规则。下面是一个例子：

   id='slider'class='swipe'>
     class='swipe-wrap'>
       

        1
       
       

        2
       
       

        3
       

　　里面包裹的三个DIV即是滑动的模块了，在滑块结束后面或页面底部添加事件代码：

window.mySwipe = Swipe(document.getElementById('slider'));

　　当然添加了事件后我们还需要添加一些基础的样式，以保证滑块能正常工作：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

　　到这里整个滑动效果就制作完成了，赶紧用手机进行测试下吧！

　　Swipe2.0还提供了更多的参数设置：

• startSlide Integer (default:0) - index position Swipe should start at（滑动的索引值,即从*值开始滑动，默认值为0）

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒）

• auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动滑动，单位为毫秒）

• continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环滑动，默认值为true）

• disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何触及此容器上滚动页面，默认值flase）

• stopPropagation Boolean (default:false) - stop event propagation（停止事件传播,默认值flase）

• callback Function - runs at slide change.（回调函数）

• transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数）

举个带参数设置的栗子：

　　Swipe2.0提供的API

prev() slide to prev（上一页）

next() slide to next（下一页）

getPos() returns current slide index position（获取当前索引位置）

getNumSlides() returns the total amount of slides（获取所有滑块总数）

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指数，持续时间）滑动设置索引位置（持续时间：转型速度以毫秒为单位）

　　与1.0相比较，2.0做出了很多改进，有更多的API设定，相比各种WebApp开发框架，Swipe也有自己的优缺点，

　　优点：

滑动与防滑性能非常不错，用户体验较好
Html结构简单，自定义较灵活

　　缺点：

切换后盒子的高度取决于切换内容最大高度，如果某个盒子无内容，那么会出现一个空白区域
当前选中状态在滑动结束后才激活
混合开发时js代码较为繁琐