npm package: @kinect-pro/angular2-carousel
Description: This is item carousel for angular 2 projects
Author: degorych
Latest version: 1.0.12
Deprecated: old version, please use new supported version

# Angular2 Carousel

### New version is available here [here](https://www.npmjs.com/package/@kinect-pro/ngp-carousel)

This project for Angular 2 (currently supported version 8) is a carousel with the ability to customize animations and styles.
Demo project here:
Live demo example [here](https://angular2-pretty-component-demo.herokuapp.com/carousel).

## Features
#### Adding your own template
To create a carousel from elements, you must pass your template to the component. Elements can be either interconnected into a collection (for example, an array of users, an array of links to photos with descriptions), or independent (for example, a photo with a description + user data + product card). You are not limited in the choice of elements to display.

#### Using elements of different width
You can use elements with different width. Scrolling such items will work correctly for each item.

#### Infinite mod
You can use infinite scrolling if you want the animation to last in a circle.

#### Custom styles
You can customize the scroll controllers to your liking, or disable them.

#### Custom animation
You can customize the duration, delay and animation type.

#### Auto animation
You can enable the auto-scrolling and pass the number of seconds that must elapse before the animation. Animation will be carried out in an automatic mode until it reaches the last element, or the user focuses on the carousel.

## Installation

### Dependencies
For the slider to work correctly, the following dependencies are required:
- "@fortawesome/angular-fontawesome": "^0.5.0"
- "@fortawesome/fontawesome-svg-core": "^1.2.22"
- "@fortawesome/free-solid-svg-icons": "^5.10.2"

### How to install
#### With npm
```npm install @kinect-pro/angular2-carousel```
#### With yarn
```yarn add @kinect-pro/angular2-carousel```

### How to setup
#### Add Angular2CarouselModule and BrowserAnimationsModule to need module
##### app.module
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Angular2CarouselModule } from '@kinect-pro/angular2-carousel';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    Angular2CarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### Add carousel component to need component
##### app.component.html
```
<kp-angular2-carousel>
  // Your template must be here
</kp-angular2-carousel>
```

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Using
### Set template to carousel
#### Using item list
##### app.component.ts
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  elements = [
    {name: 'Luis Alvarez'}, {name: 'André-Marie Ampère'}, {name: 'Anaximander'},
    {name: 'Mary Anning'}, {name: 'Francis Bacon'}, {name: 'Daniel Bernoulli'},
    {name: 'Nicolaus Copernicus'}, {name: 'Albert Einstein'}, {name: 'Galileo Galilei'}
  ];
}
```

##### app.component.html
```
<kp-angular2-carousel>
  <div *ngFor="let elem of elements" kpCarouselItem>
    <div class="elem-item">
      {{elem.name}}
    </div>
  </div>
</kp-angular2-carousel>
```

#### Using custom elements
##### app.component.html
```
<kp-angular2-carousel>
  <div class="class-1" kpCarouselItem>My first custom element</div>
  <div class="class-2" kpCarouselItem>My second custom element</div>
  <div class="class-3" kpCarouselItem>My third custom element</div>
  //...
</kp-angular2-carousel>
```
##### Note: all of your items must contain `kpCarouselItem` directive for the correct working.

### Set custom options
- autoAnimateTime: activate auto-scrolling. Scroll time must be integer or null. Default value is null.
- infinite: make carousel infinite. Must be boolean. Default value is false.
- reverse: change carousel direction. Must be boolean. Default value is false.
##### app.component.html
```
<kp-angular2-carousel
    [autoAnimateTime]="5"
    [infinite]="true"
    [reverse]="true">
  // template here
</kp-angular2-carousel>
```

### Set custom styles for controls
- hidden: hides controllers for animation, switching elements by clicking on the right or left side of the carousel. Mast be boolean. Default value is false.
- size: change controller size. Must be 'sm' - small, 'md' - middle and 'lg' - large. Default value is 'sm'.
- style: change controller style. Must be 'circle' or 'noCircle'. Default value is 'circle'.
- color: change controller color. Must be valid hex color code. Default value is '#000'.
##### app.component.html
```
<kp-angular2-carousel
    [iconOptions]="{hidden: true, size: 'md', style: 'noCircle', color: '#32a852'}">
  // template here
</kp-angular2-carousel>
```

### Set custom animation
- duration: change animation duration. Must be integer (milliseconds) or string (seconds, for example '1.4s' or milliseconds, for example '1400ms'). Default value is '250ms'.
- delay: change animation delay. Must be as duration. Default value is 0.
- easing: change animation easing. Must be 'ease', 'easeIn', 'easeInOut', 'easeOut', 'linear' or valid 'cubic-bezier()'. You can create valid curve in generator [here](https://cubic-bezier.com/). Default value is 'easeIn'.
##### app.component.html
```
<kp-angular2-carousel
    [animateOptions]="{duration: '1000ms', delay: '300ms', easing: 'cubic-bezier(.17,.67,.88,.1)'}">
  // template here
</kp-angular2-carousel>
```

## Contact us