ng-simple-carousel

undefined
undefined
undefined
  • Pure Angular Component
  • Easy customize
  • Responsive

Usages

  • Buttons on sides

    undefined
    undefined
    undefined
    <div class="wrap_carousel"> <ng-simple-carousel-with-button [images]="images" [controller]="controllerButton" (imgChange)="onImgChange($event)"> </ng-simple-carousel-with-button> </div>

  • Dots on bottom

    undefined
    undefined
    undefined
    <div class="wrap_carousel"> <ng-simple-carousel-with-dots [images]="images" [controller]="controllerDots" (imgChange)="onImgChange($event)"> </ng-simple-carousel-with-dots> </div>

  • Art Direction (Image Optimization)

    undefined
    undefined
    undefined
    <div class="wrap_carousel"> <ng-simple-carousel-with-dots [images]="images" [controller]="controller" (imgChange)="onImgChange($event)"> </ng-simple-carousel-with-dots> </div>

  • Auto slides

    Still on developing. Coming Soon!

APIs

NgSimpleCarouselComponent

Name Type
@Input controller CarouselController Class used to change component state programatically
@Input images CarouselImage[ ] Information of images on the slides
@Input objectFit "contain" | "cover" Set css object-fit property. Default is contain
@Output imgChange EventEmitter Id of image emitted when active image is changed

NgSimpleCarouselWithButtonComponent

Name Type
@Input controller CarouselController Class used to change component state programatically
@Input images CarouselImage[ ] Information of images on the slides
@Input objectFit "contain" | "cover" Set css object-fit property. Default is contain
@Output imgChange EventEmitter Id of image emitted when active image is changed

NgSimpleCarouselComponentWithDots

Name Type
@Input controller CarouselController Class used to change component state programatically
@Input images CarouselImage[ ] Information of images on the slides
@Input objectFit "contain" | "cover" Set css object-fit property. Default is contain
@Output imgChange EventEmitter Id of image emitted when active image is changed

CarouselController

Name Arg
jumpTo() id Jump to the image of specified id
prev() --- Go to previous image
next() --- Go to next image

CarouselImage

Name Type
id string required
src string required
srcset string
sizes string
alt string
sources CarouselImageSource [ ]

CarouselImageSource

Name Type
srcset string required
type string
sizes string