swiper的基础使用(四)
swiper的基础使用(四)
zhanyingwang 发表于1年前
swiper的基础使用(四)
  • 发表于 1年前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

这里是HTML5培训 swiper系列教程004:swiper教程
首先我们要搭建一个基础的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教程:http://h5edu.cn/htm/step/h5edu_893.html

共有 人打赏支持
粉丝 5
博文 66
码字总数 28707
×
zhanyingwang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: