Angular2 Carousel
here
New version is available hereThis 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.
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>
kpCarouselItem
directive for the correct working.
Note: all of your items must contain 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. 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>