前言
在前端开发中，我们经常需要使用一些常用的组件，例如滚动展示、轮播等等。这时候我们可以通过借助现有的 npm 包来快速地构建出相应的组件。
本文主要介绍一个 npm 包，即 @ngx-kit/ui-carousel，它提供了一个非常实用的轮播组件，可以帮助我们快速构建出各种轮播效果。
安装
安装 @ngx-kit/ui-carousel，只需要在终端中运行以下命令即可：
npm install --save @ngx-kit/ui-carousel
使用方法
引入组件
引入组件非常简单，只需要在需要使用轮播组件的组件中添加以下代码：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -这样我们就已经引入了组件，接下来我们需要在 HTML 文件中使用它。
使用组件
添加轮播组件非常简单，只需要在 HTML 文件中添加以下代码即可：
<ui-carousel [items]="carouselItems"></ui-carousel>
这里，[items] 属性是轮播组件需要接收的数据，我们需要在组件中定义一个数组来传递轮播项。
-- -------------------- ---- -------
------ ----- ------------ -
------------- - -
- ---- ------------------ --
- ---- ------------------ --
- ---- ------------------ --
- ---- ------------------ --
- ---- ------------------ -
--
-这样我们就拥有了一个简单的轮播组件。
可配置项
除了默认的轮播效果，@ngx-kit/ui-carousel 还提供了一些可配置项。
轮播速度
提供 speed 属性控制轮播速度：
<ui-carousel [items]="carouselItems" [speed]="2000"></ui-carousel>
是否显示控制按钮
提供 showControls 属性控制是否显示控制按钮：
<ui-carousel [items]="carouselItems" [showControls]="true"></ui-carousel>
是否显示面板指示器
提供 showIndicators 属性控制是否显示面板指示器：
<ui-carousel [items]="carouselItems" [showIndicators]="true"></ui-carousel>
自动轮播
提供 autoplay 属性控制是否开启自动轮播：
<ui-carousel [items]="carouselItems" [autoplay]="true"></ui-carousel>
轮播方向
提供 direction 属性控制轮播方向：
<ui-carousel [items]="carouselItems" [direction]="'vertical'"></ui-carousel>
可选值为 'horizontal' 和 'vertical'。
附加内容
@ngx-kit/ui-carousel 还提供了事件，可以方便地处理轮播相关逻辑。
暂停轮播
提供 pause 事件，在鼠标悬浮或者 touch 事件时暂停轮播：
<ui-carousel [items]="carouselItems" (pause)="onCarouselPause()"></ui-carousel>
恢复轮播
提供 resume 事件，在鼠标移出或者 touch 事件结束时恢复轮播：
<ui-carousel [items]="carouselItems" (resume)="onCarouselResume()"></ui-carousel>
示例代码
完整的示例代码可以在以下链接中获取：
https://github.com/ngx-kit/ui-carousel/blob/master/projects/demo-app/src/app/app.component.ts
总结
本文介绍了 @ngx-kit/ui-carousel 这个非常实用的轮播组件，这个组件支持多种轮播配置选项，并且提供了一些轮播事件，可以帮助我们快速构建出各种轮播效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c10