用Swiper.js客制化輪播圖（ㄧ）基礎設定及轉場篇

Swiper是一個完全免費的輪播圖外掛，很多網站都有使用它算是相當有名氣的。它有很多可調整的變數，所以坑也很多…

$cover

版本選擇

目前最新的版本為version8，在v4之後就趨於穩定沒有太大變化。而且有很熱心的中文api網站寫的比英文版還詳細。

版本差異

v7後把預設的.swiper-container名稱改成.swiper這點需要注意一下

安裝

需要放css跟js兩個檔案，可以先用原生的css，之後再自己寫css覆蓋樣式即可。 cdnjs連結

基本設定

這邊以v8為基準，建立出一個基本的輪播圖

範例一:基本型

初始化Swiper

var swiper = new Swiper("#mySwiper", {
    ...
});

#mySwiper可以自己替換成想控制的容器名稱。如果同一頁使用多個輪播圖，那麼容器名稱不能都取一樣的
建議用變數定義Swiper實體，在日後監聽事件上會比較方便
...是用來放Swiper的配置參數

Swiper的基本架構寫法

<div id="mySwiper" class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        ...
        </div>
        <div class="swiper-slide">
        ...
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

#mySwiper是被控制的容器，要放在最外層，且要加上.swiper(如果你不想套用swiper內建的css就可以不加)
.swiper-wrapper是用來包覆輪播圖的區塊，放在裡面的物件都會包覆在.swiper裡面不會超出
.swiper-slide是用來放置輪播圖的區塊
.swiper-pagination是分頁按鈕，如果想要使用必須加在html裡，且在js中把參數打開
.swiper-button-next .swiper-button-prev是上一頁跟下一頁的按鈕，如果想要使用必須加在html裡，且在js中把參數打開

Swiper按鈕的微調

<div class='swiper-top'>
    <div id="mySwiper" class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            ...
            </div>
            <div class="swiper-slide">
            ...
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

因為我個人不喜歡上下按鈕跟分頁按鈕混進輪播圖裡，所以我會把他們放在swiper-wrapper外面，最後再包一層swiper-top控制整個swiper的大小

這邊補充一下使用到的swiper參數及功用:

名稱	預設值	用途
slidesPerView	1	輪播圖一次顯示的幻燈片數量，也可以設定auto由畫面寬度決定一次要顯示幾個
spaceBetween	0	如果一次顯示多個幻燈片，幻燈片之間的間隔大小
breakpoints	object	因應斷點設置不同設定，如果以長度設定直接打上數字即可(EX:576 就是指視窗大於576的裝置)，也可以以長寬比例設定(EX:'@1.5' 就是指寬為長的1.5倍以上的裝置)
navigation	object	開啟上下頁按鈕的功能，並決定想控制的按鈕。如果名稱設定`.swiper-button-next` `.swiper-button-prev`就可以直接套用官方css的樣式。如果你在同一個頁面使用多個swiper那麽按鈕名稱就不能完全一樣，會有互相干擾的情況。
pagination	object	開啟分頁按鈕，使用方法跟上下頁按鈕一樣。如果名稱設定`.swiper-pagination`就可以直接套用官方css的樣式

轉場效果設定

目前swiper v8有內建8種轉場效果，只要修改effect參數即可

範例二:設定轉場效果-fade

在參數effect加上’fade’便可以開啟淡出效果，slidesPerView會強制變為1
如果swiper的最外層沒有指定高度且裡面的圖片都不一樣大小，有可能發生圖片重疊的情況。這時候要在fadeEffect參數加上crossFade:true

範例三:設定轉場效果-coverflow

在參數effect加上’coverflow’便可以開啟3D翻轉效果，如果一次只想顯示一張幻燈片可以把slidesPerView參數加上小數點，才看得到3D的效果
如果想要調整幻燈片之間的z軸的距離跟角度，要在coverflowEffect參數加上depth: 想要的距離跟rotate: 想要的角度，數值可為正或負
如果想要調整幻燈片的變形程度，要在coverflowEffect參數加上stretch: 想要的距離，數值越大幻燈片靠的越近，可以用數字跟百分比單位
預設兩側的幻燈片會有陰影，如果不想要陰影在coverflowEffect參數加上slideShadows: false即可。如果想修改陰影可以用css覆蓋掉.swiper-slide-shadow的樣式

這邊補充一下使用到的swiper參數及功用:

名稱	預設值	用途
loop	false	讓輪播圖變成循環的。但事實上是swiper會複製一份達到無縫接軌的效果，被複製的swiper class會加上`swiper-slide-duplicate`，比較大的坑是複製出來的swiper無法被綁定
centeredSlides	false	讓輪播圖置中，slidePerView數值的計算方式也會跟著改變，變成由最中間的幻燈片到另一側的數量

範例四:設定轉場效果-cards

在參數effect加上cards便可以開啟卡片效果，建議把slidesPerView設為1，才能計算出正確的寬度
如果想要調整移動卡片能拉動的最大角度，要在cardsEffect參數加上rotate: 想要的角度，數值只能為正數(負數效果跟正數一樣)
預設疊在後方的卡片會有陰影，如果不想要陰影在cardsEffect參數加上slideShadows: false即可。如果想修改陰影可以用css覆蓋掉.swiper-slide-shadow的樣式

範例五:設定轉場效果-creative

最後一個要介紹的effect是creative，他是一個相當有彈性的效果，你可以利用調整參數達到自訂的效果，demo有示範6種不同的組合

控制幻燈片的離場效果要在creativeEffect參數加上prev:{...}，控制進場效果則是next:{...}
prev、next可調整的參數:

名稱	用途
translate: [x軸,y軸,z軸]	調整移動的距離，如果參數是百分比必須要加上引號(EX: "25%")
rotate: [x軸,y軸,z軸]	調整旋轉的角色，單位為deg
opacity:	調整透明度，數值最大為1、最小為0
scale:	調整等比例的縮放大小，數值為倍率大小
shadow: true	是否有陰影，預設為false

調整移動的距離，要在prev、next參數加上translate: [x軸,y軸,z軸]
如果想要有陰影，在prev、next參數加上shadow: true即可。如果想修改陰影可以用css覆蓋掉.swiper-slide-shadow的樣式

自動輪播及速度設定

決定好樣式後，也可以調整過場速度跟速率

範例五:設定自動輪播

使用到的swiper參數及功用:

名稱	預設值	用途
speed	300	控制切換幻燈片的速度，單位為毫秒
autoplay	object	開啟自動輪播。參數加上`delay: 想要的速度`可以決定切換的速度，單位為毫秒。預設是使用者按下按鈕或挪動幻燈片後autoplay就會失效，如果參數加上`disableOnInteraction: false`則不受影響。另外你也可以加上`pauseOnMouseEnter:true`避免使用者滑鼠移入時幻燈片跳到下一張

速率的部分要在該swiper的swiper-slide進行修改

transition-timing-function 修改速率，預設是ease
transition-delay 修改延遲的時間

小結

寫著寫著發現篇幅不小心寫太長了…下一篇我們會講到更進階一點的略縮圖跟監聽功能等 😅 😅 😅