5 個 JavaScript 輪播庫
英文 | https://javascript.plainenglish.io/top-5-javascript-carousel-libraries-ef51375aba2d
翻譯 | 小愛
實施有吸引力的響應式輪播並不是一件容易的事。但是,如果你知道正確的方法,響應式輪播它就會變得容易一些。
因此,在本文中,我將介紹 React 的 5 個輪播圖表庫,並進行功能比較,以幫助你爲下一個項目選擇最佳的圖表庫。
1、Glidesjs/Glides
這是一個無依賴的 JavaScript ES6 滑塊和旋轉木馬。
Glide.js 是一個 jQuery 輪播,它簡單、輕量、多面向、多方向。不同技能水平的開發人員可以爲他們的項目添加簡單而強大的效果。
Glide.js 附帶了廣泛的設置集合,可用於創建你能想到的任何效果。
GliderJS 每週 NPM 下載量超過 76K,GitHub stars 超過 6K。
安裝
$ npm install @glidejs/glide
特徵
-
使用 Vanilla JS 構建。
-
輕量級 - 壓縮後爲 2.8kb。
-
極快 - 25ms 初始化時間。
-
完全可定製的箭頭、點導航、鼠標拖動、鍵盤可訪問性。
2、 React - Responsive Carousel
這是一款強大、輕量且完全可定製的輪播組件。
React-responsive carousel 是 React 項目的輪播組件。它功能強大、輕巧且完全可定製。
此外,它適用於移動設備,可與 SSR 配合使用,並具有自定義動畫和佈局。該組件可以顯示圖像、視頻、文本或任何其他類型的材料。
安裝
$ npm install react-responsive-carousel --save
每週有超過 145K 的 NPM 下載量和 2K 的 GitHub stars。
特徵
-
移動友好並支持滑動操作。
-
支持服務端渲染。
-
支持鍵盤導航。
-
使用自定義間隔自動播放。
-
高度可定製的拇指、箭頭、指示器和狀態。
3、 Slick Carousel
完全響應和靈活的 jQuery 輪播。
Slick 是一個全新的 jQuery 插件,允許你使用任何 HTML 組件創建完全可配置、響應式和移動友好的輪播 / 滑塊。
安裝
$ npm install slick-carousel
它每週有超過 546K 的 NPM 下載量和 27K 的 GitHub stars。
特徵
-
完全響應。
-
可使用 CSS3。
-
如果你願意,可以啓用或禁用滑動。
-
無限循環。
-
自動播放。
4、React slick
你將需要的最後一個 React 輪播。
React slick 是一個基於 React 的輪播組件。Slick 是市場上最流行的 jQuery carousel 之一。
它具有響應式設計,允許水平和垂直滾動。此外,無限循環、自動滑動、延遲加載和大量其他選項都可以訪問。
安裝
$ npm install react-slick --save
它每週有超過 735K 的 NPM 下載量和 10K 的 GitHub stars。
特徵
-
完全響應。
-
易於定製。
-
水平和垂直滑動。
-
桌面鼠標拖動。
-
無限循環。
-
箭頭鍵導航。
5、Swiper
Swiper 是一款免費的移動端觸摸輪播庫,具有硬件加速過渡和令人難以置信的原生行爲。
它專爲移動網站、移動網絡應用和原生 / 混合移動應用而設計。Swiper 並非與所有平臺兼容;它是專爲現代應用程序和平臺設計的現代觸摸滑塊,可提供最佳體驗和簡單性。
安裝
$ npm i swiper
它每週有超過 618K 的 NPM 下載量和 28K 的 GitHub stars。
特徵
-
完全導航控制。
-
雙向控制。
-
過渡效果。
-
彈性盒佈局。
-
多行幻燈片佈局。
結論
上面的輪播庫只是 React 許多可用庫中的一個子集。我在文章中分享了 5 個我精心挑選的庫,以及分享了它們的優缺點。你可以通過下面的圖表找到它們在 GitHub 上的流行程度。
我希望我的建議能幫助到你,在你開始新項目之前,能爲你的網站選擇最好的輪播庫。
感謝你的閱讀!
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/Z30gJ2SpbKev4gWP_4_SBQ