webAPP常用控件之——swiper

先放上swiper官方网站的IPA，里面各种用法还算是写的比较清楚的，分类明确，用例清楚，读起来感觉很舒服，值得看看。
http://www.swiper.com.cn/api/index.html

建议直接下载官方网站的demo，然后根据API的介绍，一步一步改成自己需要的样子。

下面我只详细说一下做一个常见的可定时翻页和手动翻页的滑动组件，用swiper怎么实现。

上面是我最后做出来的效果。

CSS与js

用swiper只需要引入一个CSS和js，分别是

 <link rel="stylesheet" href="swiper.min.css">
 <script src="swiper.min.js"></script>

body部分

然后就是主题部分的标签，各标签的结构最好和swiper给的一致，要不然后果你懂的，如果不喜欢官方给的样式怎么办？好说，自定义样式就行了。下面的结构适合于需要显示图片的。

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide red-slide">
                <img src="11.png" >
            </div>
            <div class="swiper-slide red-slide">
                <img src="12.png" >
            </div>
            <div class="swiper-slide red-slide">
                <img src="13.png" >
            </div>
            <div class="swiper-slide red-slide">
                <img src="14.png" >
            </div>
            <div class="swiper-slide red-slide">
            <img src="7.png" >
            </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>