使用文档

简介

ngx-carousel-ts —— 基于angular开发的图片轮播组件,使用简单,配置方便,提供多属性设置灵活性高。

目前还在开发持续开发中

安装和下载

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

交流 & 提问

关于作者

作者:喜欢的话点个star吧,谢谢鼓励!

results matching " "

    No results matching " "