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

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

本文为H5EDU机构官方的HTML5培训教程 swiper教程
这一节主要介绍swiper当中的居中属性。
 
这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。
首先还是要按照第一节的内容完成一个基础的swiper页面。

<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 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 class="swiper-slide">第十一页</div>
                <div class="swiper-slide">第十二页</div>
                <div class="swiper-slide">第十三页</div>
            </div>
        </div>

然后进行页面的初始化,为了使效果更加明显,我们将页面加上分组显示和页面间隙,在测试的过程当中我们也可以将分组显示删除或者注释,来观看页面效果。

<script>
            var swipre = new Swiper('.swiper-container',{
                slidesPerView:4,   //分组显示
                spaceBetween:30    //页面间隙
                centeredSlides:true  //页面居中
            });
        </script>

这样就将页面居中的属性添加到了我们的项目当中

 

点击进入swiper强化教程:http://h5edu.cn/index.php?c=index&a=step&lessonid=893

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