swiper的基礎使用（九）

這堂課我們介紹swiper頁面的多行顯示。
 
第一步，我們還是要建立一個swiper的基礎頁。不過這次我們要多創建一些slide。

<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 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 class="swiper-slide">第九页</div>
            </div>
            <div class=&#39;swiper-pagination&#39;></div>
        </div>

之後我們到js當中初始化我們的swiper

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
               pagination:&#39;.swiper-pagination&#39;,
               paginationClickable:true,
               spaceBetween:10,
               slidesPerView:3,
               slidesPerColumn:3   //将swiper页面多行显示为：3行
            });
        </script>

那麼可以看出我們這次沒有太大的變化，實現樣式依然是在初始化當中添加一條屬性---------slidePerColumn
一般這個屬性都是和分組顯示做組合使用的。頁之間也最好加上間隙

以上就是swiper的基礎使用（九）的內容，更多相關內容請關注PHP中文網（www.php.cn）！