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

特徵

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。

特徵

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