|
实施有吸引力的响应式轮播并不是一件容易的事。但是,如果你知道正确的方法,响应式轮播它就会变得容易一些。因此,在本文中将介绍 React 的 5 个轮播图表库,并进行功能比较,以帮助你为下一个项目选择最佳的图表库。/ ?- p, W; m( v; e7 E0 N f) r
1、Glidesjs/Glides
, n% p5 k+ i7 i& T7 H9 i4 E
2 N* V8 D, W( a& d: c1 r% g
这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播,它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合,可用于创建你能想到的任何效果。
0 E* U1 F, q2 e' g, t$ \安装:$ npm install @glidejs/glide
% F' F" S& [. V) F( O1 `* C! R9 g特征:
q) w, q) S+ Z- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。) i5 S h9 ~4 d. d
2、 React - Responsive Carousel K7 h6 B' N" [- j k/ Q8 C# `+ u+ d4 e
* x; J+ e1 ]/ d B0 t5 ~ 这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外,它适用于移动设备,可与 SSR 配合使用,并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。
' D' M$ H v% R% b5 Y. [8 O安装:$ npm install react-responsive-carousel --save- r6 [- b5 w: `0 M2 ]/ g& H
特征:! \ Q. |2 ^- @4 _# @; L% p
- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。4 t7 Z, g+ l3 V, M' ~# p1 D
3、 Slick Carousel8 i% j0 T6 [3 W+ p( O9 R( ~$ ]% \
! U# Z/ e' z+ [( Y7 x" f
完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件,允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。
# k/ ]' i6 k8 F( \5 b% X* ~安装:$ npm install slick-carousel
" `/ V" r0 n( X' \9 a2 o特征:
/ ~- _# }. k0 ?: @ V3 G0 X9 k8 m- 完全响应。
- 可使用 CSS3。
- 如果你愿意,可以启用或禁用滑动。
- 无限循环。
- 自动播放。
( k: `! A, v# |* `# X' a% W, ~ 4、React slick
$ ~, t6 u' u s1 b1 {) i! H
* k: S) B; W) f! D$ v$ a$ s
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计,允许水平和垂直滚动。此外,无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
! b1 c" @2 B! v. p5 Q9 K8 u4 m8 E安装:$ npm install react-slick --save
4 i2 ^$ V6 I ]& T1 t特征:8 ], |- o5 `, @1 ?. m* j! n& i$ p+ }
- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。
! }+ I7 N o0 z9 ?# @+ ]# S, K 5、Swiper& c+ L4 v: P9 M4 b0 u. T
5 _$ D3 _& V: s0 V: K8 M( m$ l Swiper 是一款免费的移动端触摸轮播库,具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容;它是专为现代应用程序和平台设计的现代触摸滑块,可提供最佳体验和简单性。6 Q5 \- N! B7 f9 w5 g' t
安装:$ npm i swiper
" t) ?/ y4 Z# U, `3 L特征:
( L$ \1 s6 M' W1 S# y: a6 P- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。% Q! y3 G2 ]! Z7 {; ]4 o& e
|
|