https://github.com/renamoo/ng-simple-carousel
Simple, responsive and customizable carousel component made with Angular
https://github.com/renamoo/ng-simple-carousel
angular carousel
Last synced: 2 months ago
JSON representation
Simple, responsive and customizable carousel component made with Angular
- Host: GitHub
- URL: https://github.com/renamoo/ng-simple-carousel
- Owner: renamoo
- License: apache-2.0
- Created: 2020-07-07T08:40:24.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T09:55:26.000Z (over 2 years ago)
- Last Synced: 2024-04-25T16:03:05.993Z (about 1 year ago)
- Topics: angular, carousel
- Language: TypeScript
- Homepage:
- Size: 11.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
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](https://ng-simple-carousel.netlify.app/)
## Install
```
npm i ng-simple-carousel
```
## APIs
### NgSimpleCarouselComponent
| | Name | Type | |
|----|------------|----------------------|------------------------------------------------------|
| @Input | controller | [CarouselController](#carouselcontroller) | Class used to change component state programatically |
| @Input | images | [CarouselImage[ ]](#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](#carouselcontroller) | Class used to change component state programatically |
| @Input | images | [CarouselImage[ ]](#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](#carouselcontroller) | Class used to change component state programatically |
| @Input | images | [CarouselImage[ ]](#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) | | |
### CarouselImageSource
| Name | Type | | |
|------------|------|----------------------|------------------------------------------------------|
| srcset | string | required | |
| type | string | | |
| sizes | string | | |