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

/

輪播 / Carousel / Slider?

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

jQuery UI上的Slider
jQuery UI上的Slider

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

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


3個輪播套件推薦

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

Slick

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

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

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

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

.slick-slide {
  will-change: transform;
}

Swiper

https://swiperjs.com/

第一次看到 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 製作輪播的概念是這樣的:

  1. 把每一張圖的 divv-if 包起來,最外層再包 <transition>
  2. <transition>name 設成 data,會因為按上、下一張而有所不同
  3. 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


Summary
Vue transition 製作簡單的 Carousel / Slider / 輪播功能
Article Name
Vue transition 製作簡單的 Carousel / Slider / 輪播功能
Description
本篇大綱:輪播/carousel/slider、3個輪播套件推薦、Slick、Swiper、Owl Carousel 2、自己寫一個carousel、Vue Transition Carousel製作、原始碼下載。很多時候只想有簡單輪播,為了簡單的效果就引用套件,很多沒用到的功能就是在增加讀取時間。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Google Others

用 Firebase、Google Apps Script、GTM 自己做一個讚按鈕

Front-End

OSM + Leaflet 學習筆記1:建地圖、marker、事件、換圖層

WordPress

WordPress SEO 有幫助的 3 + 4 個外掛

Analytics Google

Google Analytics 事件追蹤設定

Google Others

Google Optimize A/B Testing 使用筆記

Bot Telegram

Telegram Bot 學習筆記 – 5:取得使用者大頭照

Front-End

用純 CSS 寫的網頁預覽效果

Vue

D3、Vue 畫一個台灣地圖

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.