这里是HTML5培训 swiper系列教程004： 首先我们要搭建一个基础的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页面中间加入间隙。
点击进入swiper教程：