swiper的基础使用（四）

最新推荐文章于 2021-07-31 08:17:17 发布

花开艳丽终消散

最新推荐文章于 2021-07-31 08:17:17 发布

阅读量764

点赞数

分类专栏： swiper介绍文章标签： html5 swiper web前端框架移动

本文链接：https://blog.csdn.net/never__ends/article/details/51721704

版权

swiper介绍专栏收录该内容

26 篇文章 0 订阅

订阅专栏

首先我们要搭建一个基础的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页面中间加入间隙。