swiper的基础使用(四)
程序员文章站
2022-05-21 13:04:13
...
首先我们要搭建一个基础的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的基础使用(四)的内容,更多相关内容请关注PHP中文网(www.php.cn)!
上一篇: 5个 PHP 安全措施