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

UpdatedJuly 27, 2021

•1 min read•View as Markdown

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

Let's Write

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

本篇大綱

輪播 / Carousel / Slider？

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

jQuery UI上的Slider

為了寫一個比較正確的名字，就採用 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

#vuejs

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

圖片壓縮：用 Compressor.js 自動調整品質壓縮至指定大小

本篇要解決的問題很多網站功能會需要處理使用者上傳的圖片，比方讓使用者上傳會員照片。但隨著手機相機愈做愈好，拍出來的照片隨便都是幾 MB，直接上傳的話，耗時也佔空間。雖然網路上搜尋有許多圖片壓縮工具，但大多只能設定固定的壓縮的品質，無法保證壓縮後的檔案大小符合需求。本筆記文將使用 Compressor.js 套件，實作一個圖片壓縮功能，符合以下需求：自動嘗試不同的壓縮品質，直到檔案小於指定大小（ex: 600KB）為止。將圖片轉換為 WebP 格式。長、寬限制最大尺寸。這...

Oct 4, 20254 min read

使用 pm2.web 建立免費 PM2 監控系統

本篇要解決的問題 PM2 是 Node.js 裡常用的 process manager，一般如果是透過網頁監控、重啟，大概會使用官方的 Keymetrics。但，But！就是這個 But！免費版最多只能監控 4 個 Process，再多就要掏出魔法小卡了。問了 ChatGPT 後，發現有一個開源的替代方案：pm2.web，可以自己架設，不管幾個 process 都完全免費。以下筆記如何使用 Vercel + MongoDB Atlas 部署 pm2.web，免費監控我們的 PM2。架構...

Sep 26, 20252 min read

GitHub Copilot + Figma MCP Server 實戰：用 AI 快速切版教學

本篇要解決的問題最近在研究 MCP，剛好在 Threads 上看到有人實測 Figma MCP，想試看看是否真的能透過 AI 進行切版。實作了一下後，還真的可以，不過目前僅針對簡單設計稿進行測試，結果略有跑版現象，整體效果尚可接受。但目前就有這成果覺得厲害，再給它一段時間，也許前端工程師可以省掉切版的時間，把心力放到別的地方。前提是，客戶要很明確的知道自己要什麼 XD，不然靠 AI 微調，還不如人工直接改程式還比較快。用到的資源以下是要實作用 Figma MCP 來切版，需要的資源：...

Apr 12, 20252 min read

GitHub Copilot + Figma MCP Server 實戰：用 AI 快速切版教學

使用 Google Apps Script 串接 Google Analytics API，整合多站數據

本篇要解決的問題一間公司裡可能旗下會有多個網站，想同時查看所有網站的 GA 數據，通常需要開啟多個瀏覽器視窗並排顯示，操作較為繁瑣。如果可以改由 API 來取得 GA 的數據，工程師就可以把各站的資料顯示在一個頁面上，而不用同時開多個 GA 來看。開通 GA API 取得 GCP 專案編號要先有 Google Cloud Platform（GCP）的專案，沒有的話登入自己的 Google 帳號，就可以先增一個。專案編號就在資訊主頁上：開通 GA API 功能在使用 API ...

Mar 29, 20254 min read

使用 Google Apps Script 串接 Google Analytics API，整合多站數據

監聽 localStorage 事件：如何在同一頁面內偵測變更

本篇要解決的問題我們有時會把資訊存在瀏覽器的空間裡，像是 Cookies、Local Storage、IndexedDB。 Local Storage 原生的 storage 事件主要用於跨分頁同步，如下： window.addEventListener("storage", () => {}); 但如果想要在同一個頁面內監聽變更，就需要手動覆寫 localStorage 方法。 localStorage event listener 我們可以透過 Storage.prototype 覆寫...

Mar 3, 20251 min read