|
|
实施有吸引力的响应式轮播并不是一件容易的事。但是，如果你知道正确的方法，响应式轮播它就会变得容易一些。因此，在本文中将介绍 React 的 5 个轮播图表库，并进行功能比较，以帮助你为下一个项目选择最佳的图表库。7 E4 P0 O5 F' g9 c' V9 Y0 |
1、Glidesjs/Glides
7 l- H3 X! N- s K, J
- m% N, H% z! \2 I3 Z3 o" { 这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播，它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合，可用于创建你能想到的任何效果。2 u1 L0 x Z; y4 C' q) N" _% T* r
安装：$ npm install @glidejs/glide9 p3 t6 N, ?, ]; v3 G5 r6 e- \
特征：
, q) r2 T/ b! w. Y' M; N4 @- 使用 Vanilla JS 构建。
- 轻量级 - 压缩后为 2.8kb。
- 极快 - 25ms 初始化时间。
- 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。* E6 i# C6 C3 l& S/ ~" s& X
2、 React - Responsive Carousel
# k$ P5 E& G. V7 B$ E
/ u# x3 |9 x; U5 u$ z/ F# r2 T 这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外，它适用于移动设备，可与 SSR 配合使用，并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。, A4 r/ b/ f" \2 m# x
安装：$ npm install react-responsive-carousel --save
* Y1 \; e8 _ E z1 t& T9 ~特征：, R! Z5 F" o2 y; d9 D
- 移动友好并支持滑动操作。
- 支持服务端渲染。
- 支持键盘导航。
- 使用自定义间隔自动播放。
- 高度可定制的拇指、箭头、指示器和状态。) H' r( s! q" c& G4 ^( m
3、 Slick Carousel
2 Z: B- q3 O" r* j% J! d7 E
5 w& ^5 f+ R1 O+ | 完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件，允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。% p U. E- A6 s6 j5 s8 B
安装：$ npm install slick-carousel" G' n! a& `7 U; T
特征：
) L5 w* O; t; n0 G- 完全响应。
- 可使用 CSS3。
- 如果你愿意，可以启用或禁用滑动。
- 无限循环。
- 自动播放。
# z0 U& D" G2 O% L
4、React slick9 o1 M2 g* ^+ H" f4 a# \: ]
6 Y4 W6 j! o- U7 D5 {3 m
React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计，允许水平和垂直滚动。此外，无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
2 V' q9 y0 S( V0 F/ D安装：$ npm install react-slick --save: Y7 \: @ k4 u1 H" m4 ]/ z
特征：
. n1 P* H+ H+ b- 完全响应。
- 易于定制。
- 水平和垂直滑动。
- 桌面鼠标拖动。
- 无限循环。
- 箭头键导航。8 h' O2 W: F4 |: F! I
5、Swiper
' a3 q8 a. l4 d2 d$ M5 o7 B3 o @
_' ~! B0 ]7 X8 i' U" w5 S( z% P Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。% {+ ]4 g# ~" p s
安装：$ npm i swiper9 K) E, W& V- J- e2 X9 @
特征：) l, m5 c) t5 }* t; r1 o- j
- 完全导航控制。
- 双向控制。
- 过渡效果。
- 弹性盒布局。
- 多行幻灯片布局。6 O% ~, v" c+ @) d7 ~
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-8-15 10:51:25