|
|
实施有吸引力的响应式轮播并不是一件容易的事。但是，如果你知道正确的方法，响应式轮播它就会变得容易一些。因此，在本文中将介绍 React 的 5 个轮播图表库，并进行功能比较，以帮助你为下一个项目选择最佳的图表库。
7 O8 x: l7 m+ J q1、Glidesjs/Glides3 `( ?* j1 \/ V+ k4 r
3 t8 I7 z- D- f" Z1 {5 M
这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播，它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合，可用于创建你能想到的任何效果。/ _" ^7 ~2 S9 o2 d W
安装：$ npm install @glidejs/glide6 Y+ }% F5 h3 G6 n
特征：
5 T4 m# O1 s# M: t4 J9 I5 x$ h- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。- ` q; W: e6 V
2、 React - Responsive Carousel3 ^( O& r6 z. K- O6 C! y
p2 z! P! j- ]1 l! L 这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外，它适用于移动设备，可与 SSR 配合使用，并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。
2 I0 | v# a: n, a安装：$ npm install react-responsive-carousel --save2 r/ n W8 r# e% Q7 A! F5 O
特征：
' F1 c" Z+ s" }, ?' K% S1 i3 y1 }- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。
% ~* x/ h1 i8 ~ X0 j! h: Q! ]" g+ _
3、 Slick Carousel
* |9 H, T5 o0 Y" K8 ], Q
! L' x- R- }4 h- q" H4 V5 w0 e 完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件，允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。
2 g6 {7 h6 [* B* R$ V安装：$ npm install slick-carousel
! Q! k1 B/ [& N+ h特征：
Y [" ^6 A5 H6 r# r! e8 y) O- 完全响应。
- 可使用 CSS3。
- 如果你愿意，可以启用或禁用滑动。
- 无限循环。
- 自动播放。( } G! k. F( m i
4、React slick, X. n7 N- E5 s" o: D4 t1 }
: k% `7 s1 ~' h x& a: F- R9 X
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计，允许水平和垂直滚动。此外，无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
. `$ d: N8 N# ]: I( w安装：$ npm install react-slick --save* p Q+ R. r |
特征：% `3 }- a, y% z4 M* m
- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。
" L$ w, V1 ?4 x9 P! j+ F" T
5、Swiper$ B1 M8 j4 `; m" E* a9 l! G: o9 J
7 U0 }8 C3 M8 f5 w! K& N3 T& j& X7 ~ Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。 v, e* r* e2 f1 K; U% K
安装：$ npm i swiper
( N j! i, z+ E0 B B# e" ^ i3 f- q特征：2 P h. i! m, f$ h# V
- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。
' t' r0 X F$ g) t
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-8-15 10:51:25