|
实施有吸引力的响应式轮播并不是一件容易的事。但是,如果你知道正确的方法,响应式轮播它就会变得容易一些。因此,在本文中将介绍 React 的 5 个轮播图表库,并进行功能比较,以帮助你为下一个项目选择最佳的图表库。0 f! Z8 l1 \/ x: T' w8 g1 T
1、Glidesjs/Glides5 E; P I( {: c. |7 F
6 {$ F( l% c! `4 M 这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播,它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合,可用于创建你能想到的任何效果。
7 ]0 H% L2 |# y0 Z4 M3 B安装:$ npm install @glidejs/glide# K$ F6 T! {5 Z: c/ q1 E+ B* v
特征:
0 |/ {: Z$ Y' Z. Q! R- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。
! K9 W2 d4 q( S) `7 S2 p: y 2、 React - Responsive Carousel- r. R1 K, H$ _" Q
! }) K: G' E0 K6 k, {+ G; e& l- [ 这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外,它适用于移动设备,可与 SSR 配合使用,并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。5 H# x! J* [5 ]
安装:$ npm install react-responsive-carousel --save5 m% ?+ k9 O7 y; R% K o ^
特征:
, k- {7 B s _% x3 O- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。1 O. c2 @6 B' a! Q* y9 G. X& a$ ?
3、 Slick Carousel0 `8 W6 R! \9 y# t. H" B. J
' F8 `7 d/ G2 x( D* S4 V 完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件,允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。
" B1 R! b5 ^" B% a- L* ]安装:$ npm install slick-carousel0 v! Z% g' Q) q% x; }- v7 }
特征:
) T, S' \2 F) G, @ Q0 l) d- 完全响应。
- 可使用 CSS3。
- 如果你愿意,可以启用或禁用滑动。
- 无限循环。
- 自动播放。3 T+ Z0 A: u! g3 t' b B
4、React slick+ M. _9 n- G8 C( b# @
' t! J& v& W- v* I
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计,允许水平和垂直滚动。此外,无限循环、自动滑动、延迟加载和大量其他选项都可以访问。/ g( ~7 j1 w! Z
安装:$ npm install react-slick --save
+ Y; x- g$ k; l4 W, H# F特征:
& E, H3 y u: C# S1 K, p% E- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。+ c& G' i2 \& b$ Y) o- B8 R- n8 K
5、Swiper
( |; R. \, A5 E* U' L3 W' B _0 G
+ t/ I6 l$ H8 s2 ]. o
Swiper 是一款免费的移动端触摸轮播库,具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容;它是专为现代应用程序和平台设计的现代触摸滑块,可提供最佳体验和简单性。
* x" Q7 \: y( C( U4 Z# k3 P安装:$ npm i swiper: X; \+ p8 P) `# y Y( X( m
特征:
L, \9 f- P$ U7 ?& p- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。
# V0 U S/ b1 H, u; G( [$ L8 i
|
|