本篇大綱
輪播 / Carousel / Slider？
其實，標題不是故意取這麼長的。在平常寫頁面，需要用到輪播時，大部份會說 Slider，不過如果查「Slider」這個關鍵字，很多會是水平刻度軸的功能，像 jQuery UI 的就是這樣：
為了寫一個比較正確的名字，就採用 Bootstrap 上寫的 Carousel。
3 個輪播套件推薦
輪播功能有蠻多套件的，自己常用的有 3 個：
Slick
https://kenwheeler.github.io/slick/
這套是最常用的，因為他的 HTML 架構簡單，文件說明也完整，還附上許多範例。
但這套也有缺點，就是會把 DOM 改得一層一層又一層，在 debug 的時候覺得難找到節點。
另外有時也會遇到閃爍白邊的狀況，得另外寫 CSS 去解決，這邊附上解決閃爍白邊的 CSS：
.slick-slide {
will-change: transform;
}Swiper
第一次看到 Swiper 時，看見它的稱號是 GitHub 上星星數最多 的輪播套件。
這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝
看了他的版本，就在 3 天前釋出來 v5.0.0，是一直持續有在更新的套件。
Owl Carousel 2
https://owlcarousel2.github.io/OwlCarousel2/
這個是同事推薦的，用法覺得跟 Swiper 有點像。
自己寫一個 Carousel
用套件是很方便，但很多時候只想要有個簡單的輪播，不用太花俏，就是圖片可以一張一張播下去，為了一個簡單的效果就引用套件，很多套件內沒用到的功能就是在增加讀取時間而己。
去年底做了幾個心理測驗的案子，用 Vue.js 的 v-if 搭配 transition 在換題，有一天忽然想到，如果把題目都換成圖片，不就是一個簡單的 Carousel 了？就動手寫了一下，當時是寫在 CodePen 上：
See the Pen vue.js – use vue transition to create carousel by sean (@sean-su) on CodePen.
後來一忙，就忘記有寫過這東西。最近在看 CodePen，才想起來有寫過，而且還有人點愛心跟 Fork~
這幾天花了點時間把這功能包成 component，用 ES6 的 import 就可以執行，再順便寫了這篇記錄一下開發過程。
Vue Transitions Carousel 製作
用 Vue Transitions 製作輪播的概念是這樣的：
這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝
- 把每一張圖的
div用v-if包起來，最外層再包<transition> <transition>的name設成data，會因為按上、下一張而有所不同- 寫
transition的 CSS（這點想最久）
第一點在「Vue transitions 中用多個 v-if, v-show」這篇中有做說明了，主要是可以拿來切換要顯示的 div。
第二點，要換 transition name，是因為上、下一張滑動的方向不一樣。
第三點，那時想了很久，後來發現幾行就可以搞定了，Sass 是這樣：
.carousel-prev-enter-active, .carousel-prev-leave-active, .carousel-next-enter-active, .carousel-next-leave-active transition: transform 1s ease .carousel-next-enter, .carousel-prev-leave-to transform: translateX(100%) .carousel-next-leave-to, .carousel-prev-enter transform: translateX(-100%)
因為用的是 v-if 切換 DOM，所以實際上還有 lazyload 的效果，會 render 到下一張時才讀取下一張的圖。
但目前的缺點就是，一次只能輪播一張圖，如果要像套件一樣一次可以展示多張，然後按照參數一次滑動一張或一排的，還需要再加工。但如果只是簡單的想用一個輪播功能，也夠用了。
在測試的時候有發現，不知道是不是因為用 v-if，有時讀過的圖，比如第一張，一路輪播又回到第一張時，有時會再發一次 request。最後是在 <transition> 外再包一層 <keep-alive> 去解決。
因為是做成 Vue.js 的 Component，所以一些像是否要 auto play、箭頭、dots 的部份，都寫成可以在 props 上控制。在圖片路徑跟超連結的部份，也是在 props 上寫入陣列即可。
原始碼下載
有把開發的這個 Vue Carousel 放在 GitHub 上，歡迎取用。
原始碼分為沒有寫成 Component 的 index.html，以及包成 Component 的 component.html。都有在註解中作說明。
Demo
index：https://letswritetw.github.io/augurio-vue-carousel/
component：https://letswritetw.github.io/augurio-vue-carousel/component.html
原始碼
https://github.com/letswritetw/augurio-vue-carousel
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 Augustus 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 Augustus 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。