swiper的基礎使用（五）

本節講解如何讓swiper頁面分組顯示。
有時候一個螢幕當中只顯示一個頁面並不能滿足我們的開發需求，在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>
        </div>

然後在js當中進行頁面的初始化並且添加屬性，為了觀看效果更佳。
我們在頁面當中加入了slide的間隙。

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                slidesPerView:3,   //页面分组显示，这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

當然不要忘記引用我們的框架文件，這樣運行我們的頁面就會發現我們的頁面在當前屏幕當中會顯示一組。

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