swiper的基础使用（六）

黄舟原创: 2017-01-20 15:23:501202浏览

这一节主要介绍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(&#39;.swiper-container&#39;,{                
slidesPerView:4,   //分组显示                
spaceBetween:30    //页面间隙                
centeredSlides:true  //页面居中            
});        
</script>

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

以上就是swiper的基础使用（六）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇： swiper的基础使用（五）下一篇：swiper的基础使用（七）

查看更多

swiper的基础使用（六）

相关文章