|
|
实施有吸引力的响应式轮播并不是一件容易的事。但是，如果你知道正确的方法，响应式轮播它就会变得容易一些。因此，在本文中将介绍 React 的 5 个轮播图表库，并进行功能比较，以帮助你为下一个项目选择最佳的图表库。
% f" X; e+ H, s; n9 c( ?1、Glidesjs/Glides
7 y* a) y% u" h, Y
+ [$ g7 N, ]. A1 b5 H" t; Z9 Q
这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播，它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合，可用于创建你能想到的任何效果。
2 Q0 \+ ] ]0 P2 [5 ^, d5 G安装：$ npm install @glidejs/glide! e. C; J+ w" m+ I P& p! @* ^
特征：4 i$ G/ n* M7 Q8 P# {5 v: [. o/ j1 ?
- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。9 g: Z, y" z' V: E! a: G% p0 s
2、 React - Responsive Carousel9 P& j5 z+ T! T' Q
3 O1 I! h- Y7 g, I4 ^+ y
这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外，它适用于移动设备，可与 SSR 配合使用，并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。/ f$ S% I" Z1 n3 X
安装：$ npm install react-responsive-carousel --save
+ l7 b! ~0 d ?5 y4 g9 x: ^1 D w6 X特征：
! ^ J9 f- a* Z6 @- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。
/ w4 ]" B* F5 R) U% e! i5 `
3、 Slick Carousel5 K% k- z6 D- i+ L
. l" L* \; C7 k' C$ J. z: |2 C 完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件，允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。7 P8 Q2 X% B, X/ j: W, G; g4 v& m
安装：$ npm install slick-carousel
# K& j$ q8 t# v) y3 h' M" s) O) ?特征：
/ Y& N# o8 w2 \/ n- 完全响应。
- 可使用 CSS3。
- 如果你愿意，可以启用或禁用滑动。
- 无限循环。
- 自动播放。
7 N, v1 S1 A! H1 h5 ]5 Z' w
4、React slick
! _ y4 d9 Q: k% F5 f3 }+ C$ S
: U. m7 b e7 b* h1 t React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计，允许水平和垂直滚动。此外，无限循环、自动滑动、延迟加载和大量其他选项都可以访问。) [5 C$ k$ O" |5 c$ B9 _. O
安装：$ npm install react-slick --save( }, v; s- Q. B5 c$ J3 O
特征：2 @( h: H8 {/ }0 q9 ^9 t3 f
- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。
6 Z4 x1 \5 A7 S, @
5、Swiper9 L" p# z" e# o v3 z) g* U
6 Y2 r/ `2 G6 K6 g/ y) t Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。$ H; g$ T7 y6 m1 ^1 n
安装：$ npm i swiper) k+ N/ [7 O+ x; O4 X" {- x; x
特征：1 p# S9 i3 [3 h; d
- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。2 M2 t0 m$ U) v$ h& }( t# ~; u
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-8-15 10:51:25