This package has been deprecated

Author message:

old version, please use new supported version

@kinect-pro/angular2-carousel
TypeScript icon, indicating that this package has built-in type declarations

1.0.12 • Public • Published

Angular2 Carousel

New version is available here here

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.

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. 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

Package Sidebar

Install

npm i @kinect-pro/angular2-carousel

Weekly Downloads

0

Version

1.0.12

License

none

Unpacked Size

566 kB

Total Files

48

Last publish

Collaborators

  • dnsk
  • monax.at