Swiper 移动端轮播简单实现

<a href = "http://www.swiper.com.cn">Swiper</a> 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

</br>

Swiper使用方法

1.首先加载插件,需要用到的文件有<a href = "http://www.swiper.com.cn/download/index.html#file7">swiper.min.js</a>和<a href = "http://www.swiper.com.cn/download/index.html#file5">swiper.min.css</a>

<!-- swiper-3.3.1.min.css -->
<link rel="stylesheet" type="text/css" href="swiper-3.3.1.min.css">

<!-- swiper-3.3.1.min.js -->
<script type="text/javascript" src = "swiper-3.3.1.min.js"></script>

</br>

2.操作相关的 DOM 要用到 jQuery.js 或者 zepto.js , 也可以选择使用 更轻便 的<a href = "http://www.swiper.com.cn/download/index.html#file4">swiper.min.css</a>

<!-- swiper-3.3.1.jquery.min.js  轻量级的jquery -->
<script type="text/javascript" href = "swiper-3.3.1.jquery.min.js"></script>

(测试: 没有jQuery支持也可以使用)

</br>

3.html结构

<div class = "swiper-container">
    <div class = "swiper-wrapper">
        <div class = "swiper-slide">slid1</div>
        <div class = "swiper-slide">slid2</div>
        <div class = "swiper-slide">slid3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class = "swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class = "swiper-button-prev"></div>
    <div class = "swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class = "swiper-scrollbar"></div>
</div>

</br>

4.js处理

<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
        //上下 
        // direction:'vertical',
        // 是否 循环
        loop:true,
        // 如果需要 分页器
        pagination:'.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton:".swiper-button-next",
        prevButton:".swiper-button-prev",
        //如果需要滚动条
        scrollbar:'.swiper-scrollbar'
    })

</script>

5.也可以 适当的设置 样式

<style type="text/css">
    .swiper-container{
        width: 600px;
        height: 300px;
        background: green;
    }

    /*每个内容的样式*/
    .swiper-slide{
        width: 600px;
        height: 100%;
        background: red;
        font-size: 50px;
        text-align: center;
        /*vertical-align:center;*/
        /*line-height: 100%;*/
        /*单纯的设置 文字上下居中 只能通过 设置 行高属性*/
        line-height: 300px;
    }

6.效果图

slid1 slid2 slid3

以上内容摘自Swiper官网 http://www.swiper.com.cn/usage/index.html