相信在項(xiàng)目中使用過swiper.js的同學(xué)會(huì)跟我一樣，覺得這個(gè)軟件真的很好用。首先API調(diào)用簡單，其次就是他的官方文檔寫得非常之詳細(xì)，非常容易上手。
自己在項(xiàng)目中使用swiper.js很長時(shí)間了，這里根據(jù)自己的一些經(jīng)驗(yàn)和心得對(duì)swiper.js進(jìn)行總結(jié)。

swiper.js官網(wǎng)

官網(wǎng)地址：https://www.swiper.com.cn/

官網(wǎng)快捷鏈接：Swiper4使用方法 、Swiper4的API文檔

嵌套兩個(gè)或多個(gè)siwper

根據(jù)官方文檔，我們創(chuàng)建一個(gè)swiper是非常簡單的，但是如何創(chuàng)建兩個(gè)swiper，這對(duì)于一些新手小白來說可能比較迷茫。這里先給出代碼，然后再進(jìn)行解釋。

示例代碼

• 下載并引入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的第一個(gè)slide</div>
        <div class="swiper-slide">我是父親swiper的第二個(gè)slide</div>
        <div class="swiper-slide">我是父親swiper的第三個(gè)slide</div>
        <div class="swiper-slide">

            <!-- 定義嵌套的子swipe -->
            <div class="swiper-container second-one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">我是兒子swiper的第一個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第二個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第三個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第四個(gè)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會(huì)按照默認(rèn)參數(shù)進(jìn)行初始化
});

var second_swiper=new Swiper('.second-one',{
    // 這里可以不寫任何東西，swiper會(huì)按照默認(rèn)參數(shù)進(jìn)行初始化
});

使用總結(jié)

• 其實(shí)創(chuàng)建嵌套swiper很簡單，就是在一個(gè)已經(jīng)創(chuàng)建好的swiper中，確定我們?cè)谀囊粋€(gè)slide中創(chuàng)建我們的第二個(gè)swiper。然后就按照我們創(chuàng)建第一個(gè)swiper的樣子來書寫HTML代碼。
• HTMl代碼書寫好之后，我們就要使用JavaScript腳本來初始化我們的兩個(gè)swiper。這個(gè)時(shí)候有的同學(xué)就會(huì)問，我如何來區(qū)分兩個(gè)swiper呢？注意看我們的HTML代碼中，我分別給兩個(gè)swiper加了一個(gè)class="fitst-one"和class="second-one"。這樣我們就可以區(qū)分兩個(gè)swiper，然后在JavaScript腳本中初始化swiper的時(shí)候，就是用這兩個(gè)class分別來初始化兩個(gè)swiper。
• 這樣，我們便可以成功創(chuàng)建兩個(gè)嵌套的swiper。如果你要?jiǎng)?chuàng)建多個(gè)嵌套的swiper，也采用類似的方法，但是不建議嵌套過多的swiper，根據(jù)我的個(gè)人經(jīng)驗(yàn)，可能會(huì)出現(xiàn)一些bug。

注意事項(xiàng)

• 仔細(xì)觀察上面給出的HTML代碼，我們是將子swiper嵌套在父swiper的最后一個(gè)slide中，這樣在初始化swiper的時(shí)候，不進(jìn)行額外的配置，也不會(huì)有什么問題。
• 但是如果我們將子swiper嵌套在父swiper的中間的slide中，這個(gè)時(shí)候我們只能看到子swiper的第一個(gè)slide。例如我們的HTML代碼采用下面的寫法：

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

            <!-- 定義嵌套的子swipe -->
            <div class="swiper-container second-one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">我是兒子swiper的第一個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第二個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第三個(gè)slide</div>
                    <div class="swiper-slide">我是兒子swiper的第四個(gè)slide</div>
                </div>
            </div>

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

• 這個(gè)時(shí)候，我們?cè)诨瑒?dòng)slide的時(shí)候，分別會(huì)看到下面的文字：

  • 我是父親swiper的第一個(gè)slide
  • 我是兒子swiper的第一個(gè)slide
  • 我是父親swiper的第二個(gè)slide
  • 我是父親swiper的第三個(gè)slide

• 這個(gè)時(shí)候是我們的初始化的問題，如果想看到子swiper全部的slide，那么需要在初始化子swiper的時(shí)候，額外配置一些選項(xiàng)，即設(shè)置nested:true。用于嵌套相同方向的swiper時(shí)，當(dāng)切換到子swiper時(shí)停止父swiper的切換。

var first_swiper=new Swiper('.first-one',{
    // 這里可以不寫任何東西，swiper會(huì)按照默認(rèn)參數(shù)進(jìn)行初始化
});

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