本篇大綱
輪播/carousel/slider?
其實,標題不是故意取這麼長的。在平常寫頁面,需要用到輪播時,大部份會說slider,不過如果查「slider」這個關鍵字,很多會是水平刻度軸的功能,像jQuery UI的就是這樣:

為了寫一個比較正確的名字,就採用Bootstrap上寫的Carousel。
題外話,曾經遇到企畫說他想要有一個「flash」的功能,在我黑人問號了一陣子後,才發現他說的就是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 Transition Carousel製作
用Vue transition製作輪播的概念是這樣的:
- 把每一張圖的div用v-if包起來,最外層再包
<transition>
<transition>
的name設成data,會因為按上、下一張而有所不同- 寫transition的css(這點想最久)
第一點在「vue transition中用多個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

