# rb-carousel

> Simple Carousel

Latest version **1.0.0** (published 2020-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install rb-carousel
pnpm add rb-carousel
yarn add rb-carousel
bun add rb-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 | 2020-01-01 |
| First published | 2019-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 189.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ravish Bhat |
| Maintainers | ravish1479 |
| Keywords | angular-carousel, carousel, rb-carousel, angular |

## Links

- npm: https://www.npmjs.com/package/rb-carousel
- Repository: https://github.com/RavishBhat/rb-carousel
- Homepage: https://master.de0e8cpmg2b3c.amplifyapp.com/
- Issues: https://github.com/RavishBhat/rb-carousel/issues
- npm.io page: https://npm.io/package/rb-carousel

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.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) — 2020-01-01
- 0.0.9 — 2020-01-01
- 0.0.8 — 2020-01-01
- 0.0.7 — 2020-01-01
- 0.0.6 — 2020-01-01
- 0.0.5 — 2020-01-01
- 0.0.4 — 2020-01-01
- 0.0.3 — 2020-01-01
- 0.0.2 — 2019-12-29
- 0.0.1 — 2019-12-29

## README

# :zap::zap: rb-carousel :zap::zap:

A simple yet elegant carousel plugin for **Angular** .:smiling_imp:

[Click Here for Demo](https://master.de0e8cpmg2b3c.amplifyapp.com/)

## Installation and Usage

:point_right: **Step 1:** Install the plugin. 

```
npm i rb-carousel
```

:point_right: **Step 2:** Import the plugin into your module.

**app.module.ts** 

(:heavy_exclamation_mark:**Note:** Need not be *app.module.ts*, can be in any module that you intend to use the plugin)
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RbCarouselModule } from 'rb-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RbCarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

:point_right: **Step 3:** Call the *rb-carousel* in you template

**app.component.html**

(:heavy_exclamation_mark:**Note:** Again need not be *app.component.html*, can be in any template that you intend to use the plugin)
```javascript

 <rb-carousel [dataSource]="imageArray" [carouselSettings]="carouselSettings"></rb-carousel>
 
 ```
 
:heavy_exclamation_mark:**Note:** The Carousel takes the height and width of the parent element. So if you have to adjust the height and width of carousel apply the same to the parent element as follows:

```javascript
<div style="width:50%">
<rb-carousel [dataSource]="imageArray" [carouselSettings]="carouselSettings"></rb-carousel>
</div>
```
 
 :point_right: **Step 4:** Pass the `dataSource` and `carouselSettings`
 
 :heavy_exclamation_mark:**Note:** Make sure you pass the `dataSource` with an *array of objects* with `imageUrl` key, as this acts as source to the images. The `CaptionText` is optional though.
 
 :heavy_exclamation_mark:**Note:** Also make sure you pass the `carouselSettings` . The details regarding the settings are give further below.
 
 
 ```javascript
 
 import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  imageArray = [
    { CaptionText: 'someText', imageUrl: 'https://someImage.jpg' },
    { CaptionText: 'someText', imageUrl: 'https://someImage.jpg' },
    { CaptionText: 'someText', imageUrl: 'https://someImage.jpg' }
  ];

  carouselSettings = {
    autoTransition: true,
    transitionDuration: 2000,
    animation: 'fade',
    displayImageCount: true,
    loopCarousel: true
  }
}
 
 ```

 :point_right: **Step 5:**  `Kidding !` , there is no step 5 :stuck_out_tongue_winking_eye: . Thats it you should be good to go. :triumph:

## Configuration

:heavy_exclamation_mark:**Lets look into** `carouselSettings`


Setting      | Value         | Purpose 
------------ | ------------- | ------------- 
autoTransition | boolean | enable / disable the auto transition of carousel.
transitionDuration | integer | Time between transitions, will be only used if `autoTransition` is `true`
animation | string | Select the animation for the slide transition. By default `fade`
displayImageCount | boolean | enable/disable the image count on the top left of image.
loopCarousel | boolean | Loop the carousel after reaching the end of slides.


## Animations

You can set the animation to your slide in the `carouselSettings` `animation` key.
Here are the list of inbuilt animations :
1. fade
2. flipDiagonal
3. rotateIn
4. rotateFromTop
5. rotateInDown
6. bounceOut
7. rotateSmallScale
8. flipOver
9. random

:heavy_exclamation_mark:**Note:** Setting `random` will randomly apply the animation to all the slides. 
:heart_eyes: Hee He! I know !! Cool right? :sunglasses:

:heavy_exclamation_mark: Don't like any of the inbuild animations. :disappointed: (you meanie :smirk:)
You can always add your own animation. As below:

Style.scss
```css
.rotatecenter {
  animation: rotatecenterFrame 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes rotatecenterFrame {
    0% {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
    }
    100% {
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
    }
  }
  @keyframes rotatecenterFrame {
    0% {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
    }
    100% {
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
    }
  }

```

And pass the animation to the `carouselSettings`

```javascript
 carouselSettings = {
   autoTransition: true,
   transitionDuration: 2000,
   animation: 'rotatecenter',
   displayImageCount: true,
   loopCarousel: true
 }
```

Yep! Totally customizable .:punch:

## Carousel Events

Here are a list of Events that the plugin is equipped with:

Event      | Returns         | Functionality 
------------ | ------------- | ------------- 
carouselEnd | boolean | When the carousel is at its last slide. Right time to fetch more data.
transitionStart | object | At the begining of slide transition. Returns the `image object` passed. 
transitionEnd | object | At the end of slide transition. Returns the `image object` passed. 
onNextSlide | object | When clicked on `next` button.
onPreviousSlide | object | When clicked on `prev` button.


Something like this:
```javascript
 <rb-carousel 
 [dataSource]="imageArray"
 [carouselSettings]="carouselSettings" 
 (carouselEnd)="corouselEvent($event)" 
 (transitionStart)="transitionStart($event)"
 (transitionEnd)="transitionEnd($event)"
 (onNextSlide)="onNextSlide($event)" 
 (onPreviousSlide)="onPreviousSlide($event)">
 </rb-carousel>
        
```

## Author

**Ravish Bhat**

Want my help or need any changes reach out to me at *ravish1479@gmail.com*



## License

**MIT**

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