swiper的基礎使用（十）

這堂課我們介紹swiper頁面的多行顯示。
 
這堂課我們介紹swiper當中swiper的巢狀。
 
這次第一步有些不一樣，雖然同樣是要搭建swiper頁面，但是我們在一個swiper頁面當中的slide裡面嵌套了一個swiper在裡面。

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div>
                        <div class="swiper-slide">Vertical Slide 4</div>
                        <div class="swiper-slide">Vertical Slide 5</div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

我們可以看到，這次在swiper的外部容器當中添加了一個類名，swiper-container-h，這個類名其實我們可以隨便取一個，作為一個標記，記錄我們這個外部容器為哪一個swiper頁面的外部容器，我們在初始化的時候是要綁定它的，然後有幾個swiper的頁面我們就要初始化幾次，並且每一個初始化都要綁定到不同的swiper頁面的外部容器上面，不然的話我們的頁面樣式就會錯亂，下面進行初始化。 

var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });

這裡因為有兩個swiper頁面所以分別初始化了倆次，然後要分別設定每個swiper頁面的CSS樣式，以及每一個swiper頁面當中的屬性。注意，綁定的外部容器類別名稱一定部能相同，不然一個頁面初始化倆次會造成樣式錯亂。

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