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

- 先上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的宽和高取整
});

- 效果