5个JavaScript流行的轮播库

admin

       实施有吸引力的响应式轮播并不是一件容易的事。但是，如果你知道正确的方法，响应式轮播它就会变得容易一些。因此，在本文中将介绍 React 的 5 个轮播图表库，并进行功能比较，以帮助你为下一个项目选择最佳的图表库。
) U! d3 _; y4 t1 Z0 T$ f' S; Z1、Glidesjs/Glides
/ L1 z4 P( N/ r9 u( i
8 g! s; i& y# r6 e' d8 B       这是一个无依赖的 JavaScript ES6 滑块和旋转木马。Glide.js 是一个 jQuery 轮播，它简单、轻量、多面向、多方向。不同技能水平的开发人员可以为他们的项目添加简单而强大的效果。Glide.js 附带了广泛的设置集合，可用于创建你能想到的任何效果。
0 t; H, u  R! P0 n安装：$ npm install @glidejs/glide
$ C- c# r$ |- `3 ?特征：

• 使用 Vanilla JS 构建。
• 轻量级 - 压缩后为 2.8kb。
• 极快 - 25ms 初始化时间。
• 完全可定制的箭头、点导航、鼠标拖动、键盘可访问性。
    Z9 F( _2 n( I! `7 D" u

2、 React - Responsive Carousel

. J4 }; ?* t; S" B% {! n. Q0 Q+ T4 Z       这是一款强大、轻量且完全可定制的轮播组件。React-responsive carousel 是 React 项目的轮播组件。它功能强大、轻巧且完全可定制。此外，它适用于移动设备，可与 SSR 配合使用，并具有自定义动画和布局。该组件可以显示图像、视频、文本或任何其他类型的材料。
; Q- n0 P) T* Y6 L% c% q安装：$ npm install react-responsive-carousel --save
$ V9 H3 ^! b  }" A) B7 E特征：
' k7 G" S- |& Y5 o

• 移动友好并支持滑动操作。
• 支持服务端渲染。
• 支持键盘导航。
• 使用自定义间隔自动播放。
• 高度可定制的拇指、箭头、指示器和状态。
  " b0 b7 t# y2 U1 }6 J2 @

3、 Slick Carousel
/ h+ G0 ~) b0 Q. p
4 G: ]5 R/ n* G3 F       完全响应和灵活的 jQuery 轮播。Slick 是一个全新的 jQuery 插件，允许你使用任何 HTML 组件创建完全可配置、响应式和移动友好的轮播/滑块。
安装：$ npm install slick-carousel
特征：
) z8 \* ]  g1 N0 g& Z8 H6 y$ w/ N

• 完全响应。
• 可使用 CSS3。
• 如果你愿意，可以启用或禁用滑动。
• 无限循环。
• 自动播放。
  ! D) E- r! C% {/ a; Y# }% y9 t

4、React slick
9 e9 P; \8 k1 \; T! ~; C
; L2 ^% ~0 V  W/ u8 P       React slick 是一个基于 React 的轮播组件。Slick 是市场上最流行的 jQuery carousel 之一。它具有响应式设计，允许水平和垂直滚动。此外，无限循环、自动滑动、延迟加载和大量其他选项都可以访问。
安装：$ npm install react-slick --save
- U! e$ E( x$ U3 F9 n特征：
* o! L) F, t" D, r2 f. `! b

• 完全响应。
• 易于定制。
• 水平和垂直滑动。
• 桌面鼠标拖动。
• 无限循环。
• 箭头键导航。
  

5、Swiper
3 ~) B$ w% O3 ]
7 |; |0 W9 o! T, P3 |       Swiper 是一款免费的移动端触摸轮播库，具有硬件加速过渡和令人难以置信的原生行为。它专为移动网站、移动网络应用和原生/混合移动应用而设计。Swiper 并非与所有平台兼容；它是专为现代应用程序和平台设计的现代触摸滑块，可提供最佳体验和简单性。
1 I: L0 _* c# a安装：$ npm i swiper
特征：
3 H7 O2 r& F4 K+ x

• 完全导航控制。
• 双向控制。
• 过渡效果。
• 弹性盒布局。
• 多行幻灯片布局。
  : @9 R- N1 z1 e# D; w: U. A# t