# ng-simple-carousel

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

Latest version **1.2.0** (published 2021-03-22) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install ng-simple-carousel
pnpm add ng-simple-carousel
yarn add ng-simple-carousel
bun add ng-simple-carousel
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-03-22 |
| First published | 2020-06-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 151.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | renamoo |
| Keywords | angular, carousel, slider, slick, slide |

## Links

- npm: https://www.npmjs.com/package/ng-simple-carousel
- Repository: https://github.com/renamoo/ng-simple-carousel
- Homepage: https://ng-simple-carousel.netlify.app/
- Issues: https://github.com/renamoo/ng-simple-carousel/issues
- npm.io page: https://npm.io/package/ng-simple-carousel

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2021-03-22
- 1.1.0 — 2020-08-01
- 1.0.1 — 2020-07-08
- 1.0.0 — 2020-07-08
- 0.0.8 — 2020-06-30
- 0.0.7 — 2020-06-27
- 0.0.6 — 2020-06-27
- 0.0.5 — 2020-06-27
- 0.0.4 — 2020-06-27
- 0.0.3 — 2020-06-27
- 0.0.2 — 2020-06-27
- 0.0.1 — 2020-06-27

## 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<string> | 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<string> | 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<string> | Id of image emitted when active image is changed

### CarouselController
| Name       | Arg |       |                  
|------------|----------------------|------------------------------------------------------|
| jumpTo() | id<string> | 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 |  | |

---
_Source: https://npm.io/package/ng-simple-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._