轻巧方便的触摸滑动插件-swiper，常用参数整理（一）

之前巧合之下接触使用了触摸滑动插件swiper，因为其轻巧方便，而且最为重要的一点是特别适合移动端的幻灯类制作，所以在这里整合一下自己在API文档学习中常用到的参数

- 先上HTML基本结构

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/bg1.jpg" alt="test"></div>
            <div class="swiper-slide"><img src="images/bg2.jpg" alt="test"></div>
            <div class="swiper-slide"><img src="images/bg3.jpg" alt="test"></div>
            <div class="swiper-slide"><img src="images/bg4.jpg" alt="test"></div>
            <div class="swiper-slide"><img src="images/bg5.jpg" alt="test"></div>
            <div class="swiper-slide"><img src="images/bg6.jpg" alt="test"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

- CSS

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 800px;
        height: 450px;
    }
    .swiper-slide img{
        width:800px;
        height:450px;
    }
    .test{
        width:100%;
        height:100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        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参数

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',//指示器，在这里指定指示器的名称及上面对应的html的class为swiper-pagination
        loop:true,//循环，设置后图片轮播到最后一张时会继续无缝衔接到第一张，若设置为false.则会在视觉上明显看到从最后一张返回到第一章轮播图
        autoplay:1000,//自动轮播时间，单位为ms
        initialSlide:2,//循环开始时的指示器位置，起始位0对应第一张
        direction:'vertical',//轮播方向，vertical垂直，默认horizontal水平
        speed:2000,//从轮播其到图像贴合边缘使用的时间，可结合transition-timing-function设定速度变化曲线
        grabCursor:true,//抓手，设置为true时为抓手且拖动时变为紧握形态
        autoHeight:true,//设置为true时，slide的宽度会随着内容变化
    });

-具体的效果

-另一组参数的轮播（滚动视差）

- html

<div class="swiper-container">
            <div data-swiper-parallax="-23%" data-swiper-parallax-duration="1000" class="testbg"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><div data-swiper-parallax="-100">Slide 1</div></div>
                <div class="swiper-slide"><div data-swiper-parallax="-100">Slide 2</div></div>
                <div class="swiper-slide"><div data-swiper-parallax="-100">Slide 1</div></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

- 新增的CSS以设置背景层

.testbg{
        width:1080px;
        height:608px;
        background-image:url(images/bg6.jpg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center center;
    }

- swiper参数

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',//同上
        parallax:true,// 设置为true即为开启视差效果，同时需要在所需元素上增加data-swiper-parallax属性，再本例中上面的html设置为-23%，即每次向右滑动时图片在X负轴上滑出23%
        autoplay:5000,
        grabCursor:true,
        roundLengths:true,//设置为true时将slide的宽和高取整
    });

- 效果

以上就是第一波swiper的参数解析