在前端开发中，轮播图是一个非常常见的需求。@hugeinc/carousel 是一个好用的 npm 包，可以满足我们的轮播图需求。这篇文章将会介绍这个 npm 包的使用细节和示例代码。
安装
使用 npm 包管理器进行安装：
npm install @hugeinc/carousel
基本用法
import { Carousel } from '@hugeinc/carousel'
const carousel = new Carousel('.carousel', {
autoplay: true,
interval: 3000,
arrows: true,
dots: true
})以上代码创建了一个使用了 autoplay，interval，arrows，dots 选项的轮播图。这个轮播图会自动播放，每页停留 3 秒，有左右方向的箭头和底部的轮播图小点。
选项
轮播图可以自定义很多的选项。下面是这个 npm 包支持的选项列表：
autoplay
如果自动播放轮播图，这个选项应该设为 true。
interval
每个帧的停留时间（毫秒）。默认是 5000。
arrows
为了添加左右箭头，在打开这个选项时会添加 prev 和 next CSS 类到轮播图容器。
dots
如果设置成 true，就会在轮播图的所有滑片下面，添加一堆轮播数字点。白色的点代表当前页，黑色的是没有选中的页。
animationClass
随时控制轮播图的 CSS 类名。
infinite
设置为 true 可以制作无限循环的轮播图。
事件
@hugeinc/carousel 提供了一些事件来供我们监听轮播图的变化：
initializing
这个事件在轮播图初次启动时被触发。
initialized
当轮播图初始化完成时触发。
beforeChange
当轮播图片被改变时触发。
changed
当轮播图更改完成时触发。
示例代码
你可以在以下代码示例中看到如何使用 @hugeinc/carousel：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ------------
----- ---------------- ------------------------------------------------------------------------------
-------
--------- -
------ ------
------- ------
--------- ---------
--------- -------
-
--------- ------- -- -
------ -----
------- -----
--------- ---------
---- --
----- --
-------- --
----------- ------- -- --------
-------- -----
---------------- -------
------------ -------
-
--------- ------- --------- -
-------- --
----------- ------- -- --------
-
--------- ------- ------ -
--------- ---------
-------- ---
---- ----
---------- -----------------
------ -----
------- -----
-------------- ----
----------- --------- ---- ---- ----
------ -----
------- -----
------- --------
-------- -----
----------- ---------- --- ------------
-
--------- ------- ------------ -
----------- --------- ---- ---- ----
-
--------- ------- ----------- -
----- -----
---------- ---------------- ----------------
-
--------- ------- ----------- -
------ -----
-
--------- ----- -
--------- ---------
------- -----
----- ----
---------- -----------------
-------- -----
---------------- -------
------------ -------
-
--------- ----- -- -
------ -----
------- -----
-------------- ----
----------- --------- ---- ---- ----
------- ----
------- --------
----------- ---------- --- ------------
-
--------- ----- --------- -
----------- -----
-
--------
-------
------
--- --------------- --------
--- ------------------- ---------------------------------------- ----------------
-------- ---------------------------------------- ----------------
-------- ---------------------------------------- ----------------
-----
---- --------------- --------
------- --------------------------
------- --------------------------
------
--- --------------- ------
--- --------------------
---------
---------
-----
------- -------------------------------------------------------------------------------------
--------
----- -------- - --- --------------------- -
--------- -----
--------- -----
------- -----
----- ----
--
---------
-------
-------这个示例代码会生成一个轮播图，自动播放图片，并且支持左右箭头和底部的圆点导航。在上面的过程中，我们引用了 @hugeinc/carousel 包并在 JavaScript 中创建了一个新 Carousel 实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cf30d092702382293a