Swiper轻量级H5滑动切换框架

Gary

8 年前

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。

主要使用于移动端的网站、网页应用程序、以及原生的应用程序。

Swiper 主要为iOS而设计的，同时，在Android、WP8系统，以及现代桌面浏览器也有着良好的用户体验。

Swiper 官网： http://idangero.us/swiper/
Github仓库地址：https://github.com/nolimits4web/Swiper
Swiper中文网：http://www.swiper.com.cn/

1 演示

演示地址：http://idangero.us/swiper/demos/

2 使用

首先从Github上下载源码，Swiper支持原生JS和jQuery两种方式。

以下以原生JS方式举例。

引入JS和CSS文件：

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

HTML代码：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
</div>

CSS代码：

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

初始化swiper：

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
</script>

这样就可以啦。

3 参数配置

参数配置可参考两个网站：

官方网站（英文）：http://idangero.us/swiper/api/

中文网站（中文）：http://www.swiper.com.cn/api/index.html