# fb-carousel

> carousel css3

Latest version **1.0.7** (published 2019-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install fb-carousel
pnpm add fb-carousel
yarn add fb-carousel
bun add fb-carousel
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2019-07-26 |
| First published | 2017-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 717.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Fausto Blanco |
| Maintainers | faustobdls |
| Keywords | carousel, angular7, simple |

## Links

- npm: https://www.npmjs.com/package/fb-carousel
- Repository: https://github.com/faustobdls/fb-carousel
- Homepage: https://github.com/faustobdls/fb-carousel#readme
- Issues: https://github.com/faustobdls/fb-carousel/issues
- npm.io page: https://npm.io/package/fb-carousel

## Dependencies (1)

- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8

## 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.7 (latest) — 2019-07-26
- 1.0.6 — 2017-06-06
- 1.0.5 — 2017-06-06
- 1.0.4 — 2017-05-31
- 1.0.3 — 2017-05-31
- 1.0.2 — 2017-05-31
- 1.0.1 — 2017-05-31
- 1.0.0 — 2017-05-31

## README

# FB Carosel

Angular component to be able to make carousel easily.

## Getting started

Use this component is easy, just: 
  1. Install dependencies `npm install hammerjs --save`
  2. Configure `hammerjs` in `.angular-cli` add in: 
   ```json 
    "scripts": [
      "../node_modules/hammerjs/hammer.min.js"
    ],
  ```
  3. Add `import 'hammerjs';` in `app.module.ts` file;
  4. `npm install fb-carousel --save` inside your Angular project
  5. `import { FbCarousel } from 'fb-carousel';` import the component inside your module file
  6. inside your slide component use this two object to create the `banners` and the `arrows`  
  7. finally, but not least use the component on your html slide file

If you are a learning learner you can consult [this](https://github.com/yesroh/fb-carousel-example) repository where that component is used.

Banner object:
  - id: banners positions
  - bg: image link
  - title: banner title
  - exibir_title: show or not the banner title
```typescript
  banners: any[] = [
    { id: 0, bg: '/assets/banner.jpg', title: 'Banner 1', exibir_title: false },
    { id: 1, bg: '/assets/banner.jpg', title: 'Banner 2', exibir_title: false },
    { id: 2, bg: '/assets/banner.jpg', title: 'Banner 3', exibir_title: false },
    { id: 3, bg: '/assets/banner.jpg', title: 'Banner 4', exibir_title: false },
  ];
```
Arros object:
```typescript
  arrows: any = {
    left: '/assets/left.svg',
    right: '/assets/right.svg'
  }
```

HTML element:
  - delay: seconds between bannes, is in ms
  - bullet-color: self-exploitative
```html
  <fb-carousel 
    [arows]="arrows" 
    [slides]="banners" 
    delay="5000" 
    bullet-color="white">
  </fb-carousel>
```

## Future features
  - Improve title presentation and features
  - Improve bullet presentation and features

## CHANGELOG
  - Add swipe events left and right
  - Update `README.md` file

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