swiper的基礎使用（六）

這一節主要介紹swiper當中的居中屬性。
 
這個居中是指將我們瀏覽的目前頁面進行居中顯示，當我們使用分組顯示的時候效果比較明顯。
首先還是要按照第一節的內容完成一個基礎的swiper頁面。

       

   <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）！