您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

swiper的基础使用(六)

2024/4/5 19:17:26发布12次查看
这一节主要介绍swiper当中的居中属性。
这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。
首先还是要按照第一节的内容完成一个基础的swiper页面。2c1c5dbe1bb8c11b684d42c42c14fc66
<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的基础使用(六)的内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product