用Swiper.js客制化輪播圖（二）變數應用及略縮圖

第二篇主要重點在如何應用變數跟監聽去達到動態效果，以及如何建立略縮圖及做樣式上的變化

$cover

開啟監聽

監聽可以讓程式在某一個時機點執行程式，是一個很好用的功能。

開啟監聽可以有兩種寫法（以slideChange為例）

// 寫法一
var swiper = new Swiper("#mySwiper", {
    on: {
        slideChange: function(){
            ...
        }
    },
});
    
// 寫法二
var swiper = new Swiper("#mySwiper", {
    ...
});

swiper.on('slideChange', function () {
    ...
});

#mySwiper可以自己替換成想控制的容器名稱
兩種寫法的差別是在寫法一必須要全部集中在一起寫完，寫法二是可以分開並搭配別的函式

這邊補充一下常用的監聽事件:

名稱	用途
init	在啟動swiper的時候執行程式（也就是載入完成的時候執行）
slideChange / slideChangeTransitionStart	在進行滑動行為時執行程式
slideChangeTransitionEnd	滑動過場結束時執行程式
resize	改變視窗大小時執行（需要加上 `resizeObserver: true`）
click / tap / doubleTap	點擊輪播圖時會執行程式

下達命令

知道如何監聽後，便要下達指令告訴程式應該做哪一些動作。這時候我們必須要了解如何用屬性去抓取我們要的資料:

名稱(mySwiper為該swiper的變數名稱)	用途
mySwiper.$el	抓到`.swiper`的位置
mySwiper.params	修改該swiper的參數
mySwiper.$wrapperEl	抓到`.swiper-wrapper`的位置
mySwiper.slides	抓到`.swiper-slide`的位置
mySwiper.activeIndex	抓取顯示的幻燈片的序列，從0開始計算
mySwiper.realIndex	抓取顯示的幻燈片的序列，從0開始計算。不包含loop模式下所複製出來的幻燈片
mySwiper.length	抓取幻燈片的總數量

範例一:動態添加幻燈片的編號

把監聽加屬性組合在一起，便可以輕鬆完成滑動時自動更新的效果
這邊注意要使用realIndex去抓取，否則loop產生的幻燈片數字會抓取錯誤
將數字輸出html可以用attr()的方法最後用css代入，也可以用html()直接覆蓋

範例二:當幻燈片數量不足滿版時，自動置中

屬性也可以拿來應用在判斷式上，這邊運用到removeSlide()去做動態刪除的動作，括號裡面要填入想刪除的幻燈片，0代表第一張幻燈片
這邊利用swiper1.slides.length抓取幻燈片的總數量，swiper1.params.slidesPerView抓取幻燈片滿版所需的數量，最後再去做比較

略縮圖

略縮圖就是一次顯示多個小圖讓使用者能大概了解有哪些圖片，官方的命名是thumbsSwiper

thumb連動的方法

<div class='swiper-top'>
    <div id="mySwiper1" class="swiper">
        ...
    </div>
    <div id="thumbs" class="swiper">
        ...
    </div>
</div>

// 略縮圖
var galleryThumbs = new Swiper('#galleryThumbs',{
    ...
});

// 主要的輪播圖
var galleryTop = new Swiper("#galleryTop", {
    thumbs: {
        swiper: galleryThumbs,
    }
});

#galleryTop是主要的輪播圖，#galleryThumbs是略縮圖
只需在輪播圖輸入thumbs參數，便可以進行連動的動作
略縮圖的程式碼必須擺在主輪播圖的前面，否則不會連動

範例一:優化UI設計

我們可以發現基礎的設定對使用者不太友善，可以運用剛剛提到的監聽及CSS來改善它

顯示當前的swiper thumb (在.swiper-slide-thumb-active新增樣式)
當快播到最後一張輪播圖時，會自己換頁 (監聽主輪播圖並在滑動時發動，需加上centeredSlides: true, centeredSlidesBounds: true)

範例二:改變thumb的排列方式

你也可以把thumb改成直向排列，這種做法會比較考驗你的css切版能力。我這邊是使用flex分成左半部跟右半部，左邊放galleryTop、右邊放galleryThumbs。

新增參數direction設為vertical，讓略縮圖直向排列
為了避免干擾，我把上下按鈕拿掉了

名稱	預設值	用途
direction	horizontal	控制輪播圖的排列方向

總結

希望這兩篇介紹文章能讓更多想入門swiper的人能更快上手歐！如果想更深入玩不同的花樣可以在官方手冊挖掘更多～