前端輪播圖，搞定！

2024-06-09碼農

從零開始構建一個高效、穩定且美觀的輪播圖元件並非易事，本文就來分享一些開箱即用的輪播圖元件！

Swiper.js

Swiper.js 是最流行的、功能強大移動觸摸滑動庫，它以硬體加速、原生滑動體驗、輕量快速、模組化結構和豐富的API等特點著稱，支持多種動畫效果、導航控制、自訂布局以及影像懶載入等功能。Swiper 廣泛套用於網站、Web套用和行動應用中，適用於多個前端框架。

Github： https://github.com/nolimits4web/Swiper

react-slick 是一個 React 元件庫，它提供了一個可客製的、響應式的滾軸元件，用於建立滑動圖片或內容的輪播效果。

Github： https://github.com/akiran/react-slick

Ant Design 的走馬燈元件，基於 react-slick 源碼實作。

Github： https://github.com/ant-design/react-slick

Embla Carousel 是一個輕量級、無依賴且高度可延伸的輪播庫。使用者可透過其靈活的API和外掛程式來客製輪播元件，以滿足各種需求。該庫相容所有現代瀏覽器，為使用者提供流暢、精準的輪播體驗。

Github： https://www.embla-carousel.com/get-started/

react-multi-carousel 是一個功能強大、輕量級且易於客製的 React 輪播圖元件，它支持高度可客製性，允許使用者根據自己的需求進行樣式和行為的調整。該元件相容所有現代瀏覽器，支持多計畫使用和伺服器端渲染，同時提供詳細的文件和範例程式碼以幫助開發者快速上手。

Github： https://github.com/YIZHUANG/react-multi-carousel

Splide 是一款輕量、靈活且支持的滾軸/輪播器，使用 TypeScript 編寫。無依賴項，無 Lighthouse 錯誤。

Github： https://github.com/Splidejs/splide

vue3-carousel 是一個靈活、響應迅速且高度可客製的 Vue 輪播元件，幾乎適合所有用例。

Github： https://github.com/ismail9k/vue3-carousel