Image carousel

Image carousel for web page banner.

Live Preview

How to use

Install package

npm install @nghacks/banner-carousel

Import BannerCarouselModule to your consumer module.

import { NgModule } from '@angular/core';
...
...
import { BannerCarouselModule } from '@nghacks/banner-carousel';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BannerCarouselModule
  ]
})
export class ConsumerModule { }

Use Component in template

<banner-carousel
  (imageClick)="onimageClick($event)"
  (imageChange)="onimageChange($event)"
  [height]="280"
  [autoChangeInterval]="5000"
  [data]="data">
</banner-carousel>

Inputs

  /**
   * @description Data Source for the carousel
   * @field Required
   */
  
  @Input() data: IBannerCarouselImage[];

  /**
   * @description Height of the carousel
   * @type number that represents pixel
   * @default 280 in pixel
   */
  @Input() height = 280;

  /**
   * @description Enable/Disable auto change behavior of the carousel
   * @default true
   */
  @Input() autoChange = true;

  /**
   * @description Auto change interval of carousel
   * @type number that represents in ms(milisecond)
   * @default 5000 in ms
   */
  @Input() autoChangeInterval = 5000;

Outputs

  /**
   * @description Emits when carousel image is changed
   * @returns {IBannerCarouselImage}
   */
  @Output() imageChange = new EventEmitter<IBannerCarouselImage>();

  /**
   * @description Emits when carousel image is clicked
   * @returns {IBannerCarouselImage}
   */
  @Output() imageClick = new EventEmitter<IBannerCarouselImage>();

Types

interface IBannerCarouselImage {
  src: string;
  alt?: string;
  data?: any;
  id?: string | number;
}