使用swiper.js建立巢狀的swiper

相信在專案中使用過swiper.js的同學會跟我一樣，覺得這個軟體真的很好用。首先API呼叫簡單，其次就是他的官方文件寫得非常之詳細，非常容易上手。
自己在專案中使用swiper.js很長時間了，這裡根據自己的一些經驗和心得對swiper.js進行總結。

swiper.js官網

官網地址：https://www.swiper.com.cn/

官網快捷連結：Swiper4使用方法 、Swiper4的API文件

巢狀兩個或多個siwper

根據官方文件，我們建立一個swiper是非常簡單的，但是如何建立兩個swiper，這對於一些新手小白來說可能比較迷茫。這裡先給出程式碼，然後再進行解釋。

示例程式碼

• 下載並引入swiper檔案：

<link rel="stylesheet" href="swiper-4.3.3.min.css">
<script src="swiper-4.3.3.min.js"></script>

• HTML程式碼：

<!-- 定義父swiper -->
<div class="swiper-container first-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">我是父親swiper的第一個slide</div>
        <div class="swiper-slide">我是父親swiper的第二個slide</div>
        <div class="swiper-slide">我是父親swiper的第三個slide</div>
        <div class="swiper-slide">

            <!-- 定義巢狀的子swipe -->
            <div class="swiper-container second-one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">我是兒子swiper的第一個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第二個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第三個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第四個slide</div>
                </div>
            </div>

        </div>
    </div>
</div>

• CSS程式碼：

*{
    padding: 0;
    margin: 0;
}
.swiper-container{
    width: 100vw;       /*100vw的意思是寬度和瀏覽器視窗的寬度一樣*/
    height: 100vh;      /*100vh的意思是寬度和瀏覽器視窗的高度一樣*/
}

• JavaScript程式碼：

var first_swiper=new Swiper(`.first-one`,{
    // 這裡可以不寫任何東西，swiper會按照預設引數進行初始化
});

var second_swiper=new Swiper(`.second-one`,{
    // 這裡可以不寫任何東西，swiper會按照預設引數進行初始化
});

使用總結

• 其實建立巢狀swiper很簡單，就是在一個已經建立好的swiper中，確定我們在哪一個slide中建立我們的第二個swiper。然後就按照我們建立第一個swiper的樣子來書寫HTML程式碼。
• HTMl程式碼書寫好之後，我們就要使用JavaScript指令碼來初始化我們的兩個swiper。這個時候有的同學就會問，我如何來區分兩個swiper呢？注意看我們的HTML程式碼中，我分別給兩個swiper加了一個class="fitst-one"和class="second-one"。這樣我們就可以區分兩個swiper，然後在JavaScript指令碼中初始化swiper的時候，就是用這兩個class分別來初始化兩個swiper。
• 這樣，我們便可以成功建立兩個巢狀的swiper。如果你要建立多個巢狀的swiper，也採用類似的方法，但是不建議巢狀過多的swiper，根據我的個人經驗，可能會出現一些bug。

注意事項

• 仔細觀察上面給出的HTML程式碼，我們是將子swiper巢狀在父swiper的最後一個slide中，這樣在初始化swiper的時候，不進行額外的配置，也不會有什麼問題。
• 但是如果我們將子swiper巢狀在父swiper的中間的slide中，這個時候我們只能看到子swiper的第一個slide。例如我們的HTML程式碼採用下面的寫法：

<!-- 定義父swiper -->
<div class="swiper-container first-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">我是父親swiper的第一個slide</div>
        <div class="swiper-slide">

            <!-- 定義巢狀的子swipe -->
            <div class="swiper-container second-one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">我是兒子swiper的第一個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第二個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第三個slide</div>
                    <div class="swiper-slide">我是兒子swiper的第四個slide</div>
                </div>
            </div>

        </div>
        <div class="swiper-slide">我是父親swiper的第二個slide</div>
        <div class="swiper-slide">我是父親swiper的第三個slide</div>
    </div>
</div>

• 這個時候，我們在滑動slide的時候，分別會看到下面的文字：

  • 我是父親swiper的第一個slide
  • 我是兒子swiper的第一個slide
  • 我是父親swiper的第二個slide
  • 我是父親swiper的第三個slide

• 這個時候是我們的初始化的問題，如果想看到子swiper全部的slide，那麼需要在初始化子swiper的時候，額外配置一些選項，即設定nested:true。用於巢狀相同方向的swiper時，當切換到子swiper時停止父swiper的切換。

var first_swiper=new Swiper(`.first-one`,{
    // 這裡可以不寫任何東西，swiper會按照預設引數進行初始化
});

var second_swiper=new Swiper(`.second-one`,{
    nested:true
});