Swiper-页面布置

ゞ浴缸里的玫瑰 2022-09-23 03:59 176阅读 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页面中间加入间隙。**