博客> swiper的基础使用(四)
swiper的基础使用(四)
2019-08-23 12:49 评论:0 阅读:624 zhanying
html5 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页面的布置

&lt;body&gt;
    <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的初始化代码当中加入间隙的属性就可以了

    [removed][removed]
    [removed]
        var swiper = new Swiper('.swiper-container',{
            pagination:'.swiper-pagination',
            paginationClickable:true,
            spaceBetween:30  //添加每个slide的间隙
        });
    [removed]
&lt;/body&gt;

</html>

这样就可以使在每个slide页面中间加入间隙。

点击进入swiper教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部