|
|
实施有吸引力的响应式轮播并不是一件容易的事。但是,如果你知道正确的方法,响应式轮播它就会变得容易一些。因此,在本文中将介绍 React 的 5 个轮播图表库,并进行功能比较,以帮助你为下一个项目选择最佳的图表库。
# G" ~' H( Q4 A1 ~ d9 ~1、Glidesjs/Glides
, E. \5 O+ E. A* e k
5 {# g( g1 \0 O& K _8 J# d 这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播,它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合,可用于创建你能想到的任何效果。
! M( G& W. b- G: Q) Z/ f安装:$ npm install @glidejs/glide
0 M8 C k, N% L1 G& V4 e# V9 x特征:
, D5 F% w3 L, Q6 O2 c' w- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。
9 C1 ^- p# }; \5 z W 2、 React - Responsive Carousel
( c( b9 J5 _# p; e2 C* `& t1 q! x/ @
* S! U3 C* f( g0 K; W, u
这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外,它适用于移动设备,可与 SSR 配合使用,并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。
2 L q( P' c/ @7 _安装:$ npm install react-responsive-carousel --save6 h* A& A9 W9 @/ B. s1 D
特征:/ Y" S& b& T- y' y: \6 ^
- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。0 A/ l9 t2 W' y5 K
3、 Slick Carousel4 E* G T0 E% ?
' e9 c& P+ r$ X8 R
完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件,允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。
/ r0 f( u6 H o) d安装:$ npm install slick-carousel
7 H& }/ f1 A% m( e1 w特征:7 @) W, C" B! G% ]
- 完全响应。
- 可使用 CSS3。
- 如果你愿意,可以启用或禁用滑动。
- 无限循环。
- 自动播放。0 D, n1 d2 u4 Z0 ~: Q
4、React slick5 [! ^4 [9 q& h
0 f( q5 d0 V) b
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计,允许水平和垂直滚动。此外,无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
/ H' s& u1 q/ K" T) A安装:$ npm install react-slick --save" z: D) `: _$ r% O4 f& O
特征:3 w7 R6 v# b% @
- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。
: Q, X$ }, O/ J( D9 A$ a! N 5、Swiper5 o/ a& n2 }6 R3 Y' u: u
& s4 c% H0 i: |3 c5 r Swiper 是一款免费的移动端触摸轮播库,具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容;它是专为现代应用程序和平台设计的现代触摸滑块,可提供最佳体验和简单性。" A ^, L9 ~* @4 A, ?6 v
安装:$ npm i swiper
z& \! M% k3 c6 a7 L5 @特征:* p, c! w& P( [
- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。
, E; b4 a- T9 w4 M- b. [% p
|
|