项目背景
图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如 Swiper 。
但是当我们项目中的图片轮播只需要一个很简单的轮播样式，比如这样的
我们引用这样一个 110k 的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x对移动和PC端支持情况如下图
当当当当~~~
我们今天的主角登场了， thebird/Swipe ，这个插件完成了图片轮播需要的基本功能，只有 14.2k ,真真的 轻量级 啊。还有，还有
翻译一下，就是俺们全支持，不管你是PC端（IE7+）还是移动端浏览器。此处应该有掌声，哈哈~
简而言之，就是当需要一个简单的轮播时，可以选用 thebird/Swipe ，自己写一个组件。
举个栗子，就是我实现的这个—— 基于 vue 实现swipe分页组件 ，移动端和PC端均适用哦。
Result
Usage
一般情况，轮播图片因为是要经常换的，故在后台定制，定制内容如下
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>没有定制，必须在代码里写的话，也是可以的，造一个data数组swipeInfo
<!--js-->
data：{
swipeInfo:[{
href:"http://www.baidu.com",
imgSrc:""
},{
href:"http://www.baidu.com",
imgSrc:""
},{
href:"http://www.baidu.com",
imgSrc:""
}]},
components: {
'swipe-module': require('pagination-swipe'),
},
在html中绑定该数据
<!--html-->
<swipe-module :swipeinfo="swipeInfo"></swipe-module>pagination-swipe组件内容
按照swipe构造html框架，添加了pagination块
<!--template.html-->
<div v-el:swipe class='swipe bar-slider'>
<div class='swipe-wrap'>
<div v-for="item in swipeinfo"><a :href=item.href><img :src=item.imgSrc /></a></div>
</div>
<!-- 分页 -->
<div class="pagination">
<span class="swipe-pagination-switch swipe-active-switch" @click="slideToCur(0)"></span>
