简介
ng2-awesome-carousel是一款基于Angular2开发的轮播图组件，可快速实现轮播图功能。
安装
使用npm安装ng2-awesome-carousel：
npm install ng2-awesome-carousel --save
使用
在app.module.ts文件中引入Ng2AwesomeCarouselModule，只需引入一次
-- -------------------- ---- -------
------ - ------------------------ - ---- -----------------------
-----------
-------- -
--------------
------------------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -在html文件中使用carousel组件，并传入图片数组
<ng2-awesome-carousel [imageList]="imageList"></ng2-awesome-carousel>
在组件中引入CarouselItem数组，作为图片数组传给carousel组件
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -----------------------
------------
--------- -----------
--------- -
--------------------- -----------------------------------------------
-
--
------ ----- ------------ -
------ ---------- -------------- - -
--- ------------------------------- ------ ----- ------- ------ ----- ----- --- ----- ----------- ---------- --------
--- ------------------------------- ------- ----- ------- ------ ----- ----- --- ----- ----------- ---------- --------
--- ------------------------------- ------ ----- ------- ------ ----- ----- --- ----- ----------- ---------- -------
--
-参数
carousel组件提供多个参数进行自定义，如下：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| imageList | CarouselItem[] | [] | 图片数组 |
| height | number | 500 | 轮播图高度, 单位px |
| interval | number | 3000 | 轮播图轮换时间, 单位ms |
| showIndicator | boolean | true | 是否显示指示器 |
| showArrows | boolean | true | 是否显示箭头 |
示例
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- -----------------------
------------
--------- -----------
--------- -
---------------------
-----------------------
--------------
-----------------
----------------------
-------------------
------------------------
-
--
------ ----- ------------ -
------ ---------- -------------- - -
--- ------------------------------- ------ ----- ------- ------ ----- ----- --- ----- ----------- ---------- --------
--- ------------------------------- ------- ----- ------- ------ ----- ----- --- ----- ----------- ---------- --------
--- ------------------------------- ------ ----- ------- ------ ----- ----- --- ----- ----------- ---------- -------
--
-总结
ng2-awesome-carousel组件是一款基于Angular2的轮播图插件，具有轮播图基本功能和多种参数配置。我们可以方便快捷地使用该插件实现轮播图功能。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb481e8991b448dc5c8