您的位置：首页 > Web前端 > HTML5

swiper的基础使用（四）

2016-06-20 16:32 477 查看

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

当然事先不要忘记引用下载好的框架文件。
这一章我们添加了设置容器的宽、高（前面的也要设置，不过没有写出来）

<!doctype html>

<html>

<head>

<title>在slide之间加上间隙</title>

<meta charset="utf-8">

<link rel="stylesheet" href="swiper.min.css">

<style>

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;

}

</style>

</head>

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

<body>

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">第一页</div>

<div class="swiper-slide">第二页</div>

<div class="swiper-slide">第三页</div>

<div class="swiper-slide">第四页</div>

<div class="swiper-slide">第五页</div>

</div>

<div class="swiper-pagination"></div>

</div>

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

<script src="swiper.min.js"></script>

<script>

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

pagination:'.swiper-pagination',

paginationClickable:true,

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

});

</script>

</body>

</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 swiper web前端框架移动

相关文章推荐

新的分享

章节导航