Swiper轻量级H5滑动切换框架

5.2k 前端 发表评论

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

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

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

1 演示

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

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

昵称 *