# Vue transition 製作簡單的 Carousel / Slider / 輪播功能


## 本篇大綱

* [輪播 / Carousel / Slider？](https://letswrite.tw/vue-carousel-slider/#%e8%bc%aa%e6%92%ad/carousel/slider%ef%bc%9f)

* [3個輪播套件推薦](https://letswrite.tw/vue-carousel-slider/#3%e5%80%8b%e8%bc%aa%e6%92%ad%e5%a5%97%e4%bb%b6%e6%8e%a8%e8%96%a6)
[Slick](https://letswrite.tw/vue-carousel-slider/#slick)
[Swiper](https://letswrite.tw/vue-carousel-slider/#swiper)
[Owl Carousel 2](https://letswrite.tw/vue-carousel-slider/#owl-carousel-2)

* [自己寫一個carousel](https://letswrite.tw/vue-carousel-slider/#%e8%87%aa%e5%b7%b1%e5%af%ab%e4%b8%80%e5%80%8bcarousel)

* [Vue Transition Carousel製作](https://letswrite.tw/vue-carousel-slider/#vue-transition-carousel%e8%a3%bd%e4%bd%9c)

* [原始碼下載](https://letswrite.tw/vue-carousel-slider/#%e5%8e%9f%e5%a7%8b%e7%a2%bc%e4%b8%8b%e8%bc%89)
[Demo](https://letswrite.tw/vue-carousel-slider/#demo)
[原始碼](https://letswrite.tw/vue-carousel-slider/#%e5%8e%9f%e5%a7%8b%e7%a2%bc)

## 輪播 / Carousel / Slider？

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

![jQuery UI上的Slider](https://cdn.hashnode.com/res/hashnode/image/upload/v1627359331073/VrAXWy_di.png)

為了寫一個比較正確的名字，就採用 Bootstrap 上寫的 Carousel。

題外話，曾經遇到企畫說他想要有一個「flash」的功能，在我黑人問號了一陣子後，才發現他說的就是 Carousel。

---

## 3個輪播套件推薦

輪播功能有蠻多套件的，自己常用的有3個：

### Slick

<https://kenwheeler.github.io/slick/>

這套是最常用的，因為他的 HTML 架構簡單，文件說明也完整，還附上許多範例。

但這套也有缺點，就是會把 DOM 改得一層一層又一層，在 debug 的時候覺得難找到節點。

另外有時也會遇到閃爍白邊的狀況，得另外寫 CSS 去解決，這邊附上解決閃爍白邊的 CSS：

閱讀全文：[Vue transition 製作簡單的 Carousel / Slider / 輪播功能 - Vue - Let's Write](https://letswrite.tw/vue-carousel-slider/)