|
|
实施有吸引力的响应式轮播并不是一件容易的事。但是，如果你知道正确的方法，响应式轮播它就会变得容易一些。因此，在本文中将介绍 React 的 5 个轮播图表库，并进行功能比较，以帮助你为下一个项目选择最佳的图表库。6 ]: N. b8 U6 W% ? W; ^7 F
1、Glidesjs/Glides$ U; I3 S5 l! i4 m/ M
x7 j0 p: @+ i) Q# E' L, x$ W. v
这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播，它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合，可用于创建你能想到的任何效果。
/ s$ w3 ?8 A; S0 \. N3 h% `安装：$ npm install @glidejs/glide* q% c. E( q- {# ~
特征：
! L& ^7 d# |1 N$ n- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。
6 y5 Z" u1 u- _8 d( \& O, @" Q: J
2、 React - Responsive Carousel- M9 F" ]( B( H' N
( d0 K/ a% y+ x7 B. U 这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外，它适用于移动设备，可与 SSR 配合使用，并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。3 l3 R, Q7 ]$ t% D6 c \1 Z6 B1 l
安装：$ npm install react-responsive-carousel --save, J% ?+ ~+ {, v6 b
特征：
5 S" U. R1 b4 K7 h- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。4 t" y E0 y8 m( _; c
3、 Slick Carousel
3 J! ?; S' b; W2 D5 C5 A( r
) C2 H9 D) O& `7 [- j. v# ]
完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件，允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。8 E/ M) Y+ b- G" O4 {
安装：$ npm install slick-carousel
; ]' }$ J, f4 @: X; \4 J, @特征：
2 R. C6 D( @. r$ B% t! {7 D) Z- 完全响应。
- 可使用 CSS3。
- 如果你愿意，可以启用或禁用滑动。
- 无限循环。
- 自动播放。& |, J" b! m& F7 }9 ^
4、React slick
& r7 M5 \! k% ?& h
0 v# |" U0 U5 N7 k% U$ U4 }
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计，允许水平和垂直滚动。此外，无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
- G# r' K% I G. D3 u. E& Q安装：$ npm install react-slick --save
9 _0 k& y8 Z$ z( ?! F% _2 o7 w特征：- p( `1 n6 Q6 ?8 e2 p9 c
- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。
4 X+ m- x. O0 n
5、Swiper. P& D, G) u% S' x) }# [2 B& E
+ e9 O, z/ l5 r; \) R7 d4 A Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。8 o: F( Q" R+ t( O1 ~9 i- S
安装：$ npm i swiper
' k+ H7 R m4 a: v |特征：# h7 U( b& f' k" U+ I
- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。
; h7 p5 V* V1 c6 M. p9 s
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-8-15 10:51:25