# hs-simple-carousel

> This is a simple carousel for angular7 and above

Latest version **1.0.0** (published 2018-11-22) · 0 weekly downloads

## Install

```sh
npm install hs-simple-carousel
pnpm add hs-simple-carousel
yarn add hs-simple-carousel
bun add hs-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.0.0 |
| Published | 2018-11-22 |
| First published | 2018-11-22 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 523.2 KB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | enoksaju |
| Keywords | angular, carousel, simple, css, slider |

## Links

- npm: https://www.npmjs.com/package/hs-simple-carousel
- npm.io page: https://npm.io/package/hs-simple-carousel

## Dependencies (7)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [@angular/core](https://npm.io/package/@angular/core.md) ~7.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ~7.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~7.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~7.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~7.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~7.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.0.0 (latest) — 2018-11-22

## README

# hs-simple-carousel

This is a simple carousel for angular7 and above

## Installation

#### NPM
```cmd
npm i hs-carousel-library
```

## Usage

#### app.module.ts
```TYPESCRIPT
import { SimpleCarouselModule } from 'hs-carousel-library';

@NgModule({  
  imports: [SimpleCarouselModule]
  ...
})
export class AppModule {}
```

#### app.component.ts
```TYPESCRIPT
import { Component } from '@angular/core';
import { CarouselItem } from './modules/simple-carousel/simple-carousel.module';

const IMAGES: CarouselItem[] = [
  {
    titulo: 'Llanura que',
    content: 'Llanura que que plata todo heridas con celeste, al los consume quemadas las nunca con..',
    imageUrl: 'https://dummyimage.com/1920x16:9/ff00ff/ffffff.png',
  },
  {
    titulo: 'that shrine',
    imageUrl: 'https://dummyimage.com/1920x16:9/ff0000/ffffff.png',
  },
  {
    titulo: 'That all might',
    content: 'That all might a who riot een long, to not that shrine.',
    imageUrl: 'https://dummyimage.com/800x16:9/00aa00/ffffff.png',
  }
];

@Component({
  selector: 'hs-root',
  templateUrl: './app.component.html',
  styles: [],
})
export class AppComponent {
  images = IMAGES;
}
```

#### app.component.html

```HTML
<hs-simple-carousel 
  [autoplay]="true" 
  [interval]="10000" 
  [images]="images" 
  [animationType]="'fade'">
</hs-simple-carousel>
```
## PROPERTIES

#### [autoplay] (boolean)
enable or disable the auto reproduction with interval indicated in property [interval].

#### [interval] (integer)
set the interval to change the slide.

#### [Images] (CarouselItem[])
collection of CarouselItem elements, this contains the URL of image, Title of slide, and content of slide.

#### [animationType] (string)
set the type of transition of slides, the posibles values is one of:

```typescript
   'default'
   'bouncedown'
   'bounceup'
   'bounceleft'
   'bounceright'
   'slideup'
   'slidedown'
   'slideleft'
   'slideright'
   'fade'
   'fadedown'
   'fadeup'
   'fadeleft'
   'faderight'
   'flip'
   'flipx'
   'flipy'
   'rotate'
   'rotatedownleft'
   'rotatedownright'
   'rotateupleft'
   'rotateupright'
```

## Interfaces

#### CarouselItem
```TYPESCRIPT
export interface CarouselItem {
  titulo?: string;
  imageUrl: string;
  content?: string;
}
```


## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License
[MIT](https://choosealicense.com/licenses/mit/)

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