相信在項目中使用過swiper.js的同學會跟我一樣绣夺，覺得這個軟件真的很好用榨馁。首先API調用簡單，其次就是他的官方文檔寫得非常之詳細输钩，非常容易上手。
自己在項目中使用swiper.js很長時間了仲智，這里根據(jù)自己的一些經(jīng)驗和心得對swiper.js進行總結买乃。
swiper.js官網(wǎng)
官網(wǎng)地址：https://www.swiper.com.cn/
官網(wǎng)快捷鏈接：Swiper4使用方法 、Swiper4的API文檔
嵌套兩個或多個siwper
根據(jù)官方文檔钓辆，我們創(chuàng)建一個swiper是非常簡單的剪验，但是如何創(chuàng)建兩個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會按照默認參數(shù)進行初始化
});
var second_swiper=new Swiper('.second-one',{
// 這里可以不寫任何東西啸臀，swiper會按照默認參數(shù)進行初始化
});
使用總結
- 其實創(chuàng)建嵌套swiper很簡單茂浮，就是在一個已經(jīng)創(chuàng)建好的swiper中，確定我們在哪一個slide中創(chuàng)建我們的第二個swiper壳咕。然后就按照我們創(chuàng)建第一個swiper的樣子來書寫HTML代碼席揽。
- HTMl代碼書寫好之后，我們就要使用JavaScript腳本來初始化我們的兩個swiper谓厘。這個時候有的同學就會問幌羞，我如何來區(qū)分兩個swiper呢？注意看我們的HTML代碼中竟稳，我分別給兩個swiper加了一個
class="fitst-one"和class="second-one"属桦。這樣我們就可以區(qū)分兩個swiper，然后在JavaScript腳本中初始化swiper的時候他爸，就是用這兩個class分別來初始化兩個swiper聂宾。 - 這樣，我們便可以成功創(chuàng)建兩個嵌套的swiper诊笤。如果你要創(chuàng)建多個嵌套的swiper系谐，也采用類似的方法，但是不建議嵌套過多的swiper讨跟，根據(jù)我的個人經(jīng)驗纪他，可能會出現(xiàn)一些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會按照默認參數(shù)進行初始化
});
var second_swiper=new Swiper('.second-one',{
nested:true
});
