html利用什么技术swiper,swiper的基础使用（四）

这里是HTML5培训 swiper系列教程004：swiper教程       4

首先我们要搭建一个基础的swiper页面。

当然事先不要忘记引用下载好的框架文件。

这一章我们添加了设置容器的宽、高

在slide之间加上间隙

body{

margin:0;

padding:0;

}

.swiper-container{

width:500px;

height:300px;

margin:20px auto;

}

.swiper-slide{

text-align:center;

font-size:18px;

display:flex;

justify-content:center;

align-items:center;

background:#F2F2F2;

}

之后还是按照第一节课的内容实现一个基本的swiper页面的布置

第一页

第二页

第三页

第四页

第五页

然后在js的初始化代码当中加入间隙的属性就可以了

var swiper = new Swiper('.swiper-container',{

pagination:'.swiper-pagination',

paginationClickable:true,

spaceBetween:30  //添加每个slide的间隙

});

这样就可以使在每个slide页面中间加入间隙。