swiper的基礎使用（五）

本文爲H5EDU機構官方HTML5培訓教程HTML5培訓,swiper教程。本文主要介紹swiper框架的基本使用方法。

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

       

而後在js當中進行頁面的初始化而且添加屬性，爲了觀看效果更佳。
咱們在頁面當中添加了slide的間隙。

 <script>
            var swiper = new Swiper('.swiper-container',{
                slidesPerView:3,   //頁面分組顯示，這裏顯示爲3組
                spaceBetween:30   //slide間隙
            });
        </script>

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

點擊進入swiper教程：http://h5edu.cn/htm/step/h5edu_893.html