ng-simple-carousel

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

Usage no npm install needed!

<script type="module">
  import ngSimpleCarousel from 'https://cdn.skypack.dev/ng-simple-carousel';
</script>

README

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