使用文档
简介
ngx-carousel-ts —— 基于angular开发的图片轮播组件,使用简单,配置方便,提供多属性设置灵活性高。
- 官网: https://mrfujianfei.github.io/ngx-carousel-ts.github.io/
- 文档: https://mrfujianfei.github.io/ngx-carousel-ts.github.io/doc/use/
- 源码: https://github.com/Mrfujianfei/ngx-carousel-ts
目前还在开发持续开发中
安装和下载
npm:
npm i ngx-carousel-ts
快速使用
1.步骤一:引入NgxCarouselTsModule。
import { NgxCarouselTsModule } from 'ngx-carousel-ts';
2.步骤二:在app.module里面声明NgxCarouselTsModule。
imports: [ NgxCarouselTsModule ]
3.步骤三:使用。
HTML如下:
<ngx-carousel [options]="options"></ngx-carousel>
Typescipte如下:
export class AppComponent {
options = {
data:['图片路径1','图片路径2'],
};
}
注:图片路径可以是相对路径,也可以是绝对路径!
属性配置列表
注:在设置组件容器的高宽的时候,为了保证图片展现最好质量,请保证图片比例和容器比例相等
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 轮播容器宽度 | number | 900 |
height | 轮播容器高度 | number | 300 |
data | 数据源 | array | [] |
type | 轮播类型 | string | 'flat' | 'cube' |
showHandover | flat类型是否显示左右切换图标 | boolean | true |
handoverPosition | falt类型左右切换图标的位置 | string | 'inner' | 'side' |
fmAlign | falt类型图片在容器内的对齐方式 | string | 'center' | 'start' | 'end' |
showDottedMenu | 是否展示底部导航 | boolean | true |
autoplay | 是否自动播放 | boolean | true |
dotteStyle | 底部导航类型 | string | 'strip' | 'circle' |
ifShadow | cube类型是否有阴影 | boolean | true |
interval | 自动播放间隔时间(单位:秒) | number | 2 |
事件
事件名 | 说明 | 类型 | 返回值 |
---|---|---|---|
clickHandle | 轮播组建当前项点击回调 | function | Index |
交流 & 提问
- github: https://github.com/Mrfujianfei/ng-carousel/issues
- QQ:1501324336
- WeChat:fu1501324336
关于作者
作者:喜欢的话点个star吧,谢谢鼓励!