轻巧方便的触摸滑动插件-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的参数解析