我是
靠谱客的博主
搞怪大雁，最近开发中收集的这篇文章主要介绍
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的基础使用（六）的全部内容，希望文章能够帮你解决swiper的基础使用（六）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复