简介
@4geit/ngx-slideshow-component 是一个 Angular 轮播组件，它支持全屏查看、无限自动轮播以及多种自定义配置选项。
这个组件非常易于使用，无需大量代码即可创建自定义样式的轮播组件。本篇文章将详细介绍该组件的使用方法。
安装
在使用之前，需要先安装该组件。可以使用 npm 进行安装。
npm install --save @4geit/ngx-slideshow-component
安装完成后，需要在 module 中导入该组件：
-- -------------------- ---- -------
------ - --------------------------- - ---- ---------------------------------
-----------
-------- -
-- ---
---------------------------
--
-- ---
--
------ ----- --------- - -使用
在模板中使用该组件非常简单。只需要在模板中添加 ngx-slideshow-component 标签并绑定数据即可。
<ngx-slideshow-component [images]="images"></ngx-slideshow-component>
其中，images 属性为图片地址的数组。例如：
public images = [ 'https://via.placeholder.com/1080x720?text=Slide%201', 'https://via.placeholder.com/1080x720?text=Slide%202', 'https://via.placeholder.com/1080x720?text=Slide%203' ];
自定义选项
ngx-slideshow-component 支持多种自定义配置选项，可以通过设置属性进行自定义。以下是该组件的所有选项和默认值：
- images: string[] - 图片地址数组
- autoSlide: boolean - 是否启用自动轮播，默认为 true
- autoSlideDelay: number - 自动轮播的延迟时间，单位为毫秒，默认为 5000
- loop: boolean - 是否启用无限循环轮播，默认为 true
- fullScreen: boolean - 是否开启全屏模式，默认为 true
- height: number - 组件高度，默认为 window.innerHeight
- width: number - 组件宽度，默认为 window.innerWidth
- transitionDuration: number - 图片切换动画的时长，单位为毫秒，默认为 500
可以通过设置这些属性来实现自定义组件。
以下是一个示例，展示所有自定义选项的设置：
-- -------------------- ---- ------- ------------------------ ----------------- ------------------- ----------------------- -------------- -------------------- -------------- ------------- ------------------------------------------------------
结语
@4geit/ngx-slideshow-component 是一个非常实用的 Angular 轮播组件。该组件非常易于使用，同时支持多种自定义配置选项，可以满足各种需求。希望本文能够帮助你更好地使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1281e8991b448daa80