Skip to content

renamoo/ng-simple-carousel

Repository files navigation

ng-simple-carousel

A carousel component made with Angular 10. No other dependencies. Focus on simple functionality, allowing easy-customize. Responsive and mobile-frindly.

Demo

You can check samples from here

Install

npm i ng-simple-carousel

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

About

Simple, responsive and customizable carousel component made with Angular

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •