[JS插件] Swiper：强大的触摸滑动&整屏滚动插件

关于Swiper

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

点击这里查看实例演示

使用说明：

一、下载源码

在官网下载源码：http://www.swiper.com.cn/download/index.html
只需要下载swiper.min.js、swiper.min.css即可使用，如果你需要用jquery就要再单独下载

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2、引入 swiper.min.css 文件，引入 swiper.min.js 文件。

<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>

三、写出你要分几屏的html结构，并配上样式

1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分3屏，如下：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide p1">Slide 1</div>
        <div class="swiper-slide p2">Slide 2</div>
        <div class="swiper-slide p3">Slide 3</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>

2、配上样式：

<style type="text/css">
html,body { width:100%; height:100%;} /*这行设置能实现单层满屏显示*/
.swiper-container { width: 100%; height: 100%;} /*这行设置能实现单层满屏显示*/
.p1 { background-color:#E13437;} /*p1层的背景色*/
.p2 { background-color:#9C2ACE;} /*p2层的背景色*/
.p3 { background-color:#317AC7;} /*p3层的背景色*/
</style>

四、写入JavaScript启动代码

默认是横向滑动，如果需要竖屏滑动，请加入 direction: ‘vertical’ 参数。其他更多参数请参考官网 http://www.swiper.com.cn/api/basic/2014/1215/21.html

<script>
window.onload = function() {
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })
}
</script>

如果需要多个swiper嵌套，则要改动js代码：

<script>
    var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });
</script>