最近在做的前端項目中有一個聯動輪播的需求,想到了之前swiper有過類似的項目,于是把代碼復制了一下,大大的節省了時間,記錄一下寫法,以便于以后查閱。

首先,雖然說是聯動菜單,不過其實是有兩個swiper組成的。在1號swiper切換的時候,同時帶動2號swiper切換,反之亦然。

而我們切換的關鍵就是thumbs這個組件。

我們看一下官方的介紹。

需要注意的是,在我們寫css的時候,可以根據2號swiper選中的不同給予不同的透明度,來達到視覺上突出的感覺。
了解更多swiper點擊這里。
下一篇: 創建vue3的兩種方式
