First we need to build a basic swiper page.
Of course, don’t forget to quote the downloaded framework file in advance.
In this chapter we added setting the width and height of the container
<!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>
After that, we still implement the layout of a basic swiper page according to the content of the first lesson
<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>
Then just add the gap attribute to the js initialization code
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination',
paginationClickable:true,
spaceBetween:30 //添加每个slide的间隙
});
</script>
</body>
</html>
This allows you to add gaps in the middle of each slide page.
The above is the basic use of swiper (4). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
