Carousel for angular 2+ projects
classlist.js and web-animations-js
npm install @kinect-pro/ngp-carousel`
#### With yarn
`yarn add @kinect-pro/ngp-carousel`
To install target version you can use tags ng8, ng9, ng10 etc:
`npm install @kinect-pro/ngp-carousel@ng9`
$3
#### Add NgpCarouselModule and BrowserAnimationsModule module
##### app.module
`
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgpCarouselModule } from '@kinect-pro/ngp-carousel';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NgpCarouselModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
#### Add carousel component to template
##### app.component.html
`
{{elem.name}}
`
Usage examples
##### 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: 'Jenfirebreatha'}, {name: 'Brainsra'}, {name: 'Pacoffin'}, {name: 'Quatorifiliny'},
{name: 'Rosepop'}, {name: 'Agamason'}, {name: 'Mooreconda'}, {name: 'Hayetwinkle'}
];
images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
}
`
##### app.component.html
1 Default carousel
`
{{elem.name}}
`
2. Custom buttons
You can add your own styled buttons by using ngpCarouselButton directive
and property slot (allowed values left or right)
that decide on what place set your control.
`
{{elem.name}}
`
Carousel by default will add click event on your component.
But if you wish avoid this behaviours, you cant set disableDefaultClick flag to false
`
`
3. Full width items
By default carousel use own element width for display them.
But sometimes needed to use fully carousel width items.
To achieve that you can use flag perPage set to true
`
[innerButtons]="true"
[loop]="true"
[animationDelay]="100"
[animationDuration]="500"
[animationEasing]="'ease-in-out'"
>
`
##### More examples you can find on official homepage of project.
Properties
Property
Type
Default
Description
index number 0
Only for reading. Returns index of current template item that carousel cursor is pointed.
isOnStart boolean true
Only for reading. returns true when carousel cursor positioned on first of templates.
isOnEnd boolean false
Only for reading. returns true when carousel cursor positioned on last of templates.
disabled boolean false
disable carousel activity.
loop boolean false
loop scrolling, the animation will to last in a circle.
rtl boolean false
right to lest carousel items orientation.
fullSizeItems boolean false
Makes items sized on full width of carousel container.
*has removed since of version 2.1.0
perPage boolean | number false
Makes items seized on full or partial width of carousel container.
*has added in version 2.1.0
buttonsMode string | enControlsMode 'show'
Button display mode. Possible values:
'show' - always display
'hide' - always hidden
'auto' - will display buttons if width of content
smaller than width of carouses
innerButtons boolean false
Flag allow to switch position where to place buttons,
on the sides of carousel contend or on top of.
autoSlide number | boolean false
Time to automatic slide items in ms.
autoSlideDirection string | enDirection 'next'
Direction of automatic slide items. Possible values:
'next' - slide to next item
'prev' - slide to previous item
animationDelay number 0
animationDuration number 250
animationEasing string 'ease-in'
Methods
You can manipulate carousel manually by using @ViewChild()
Methods:
fill() - manual fill carousel by content items
clear() - remove all carousel items
prev() - move items to previous
next() - move items to next
toStart() - slide to first. working only when loop mode disabled
toEnd() - slide to last. working only when loop` mode disabled