Ng2Carouselamos
Ng2-carouselamos is a simple carousel/slider which just use css transitions to do the work
Demo
Getting started
- Install node package:
npm i ng2-carouselamos --save
And then, in your app.module.ts :
import { Ng2CarouselamosModule } from 'ng2-carouselamos';
...
@NgModule({
...
imports: [
...
Ng2CarouselamosModule
],
...
})
Documentation
ng2-carouselamos - attribute to apply carousel
startAt - initial slide to render. Defaults to 0.
width - size of window to show
items - objects array that belong to the carousel
$item - template for each item
$prev - template for previous button
$next - template for next button
onSelectedItem($event) - event triggered when snap element. $event is an object containing the current item and the current index - { item: ..., index: ... }
Inside $item template we have access to the follow:
-
let-item- the current element of the objects array -
let-i="index"- current index
Implementing
<div
ng2-carouselamos
[width]="500"
[items]="[
{ name: 'Alice'},
{ name: 'Bob'},
{ name: 'John Doe'},
{ name: 'Jane Doe'}
]"
[$item]="itemTemplate"
[$prev]="prevTemplate"
[$next]="nextTemplate"
(onSelectedItem)="selectedItem = $event.item; selectedIndex = $event.index"
></div>
<div>
Current item selected <br />
{{ selectedIndex }} - {{ selectedItem }}
</div>
<ng-template #prevTemplate>
<span>Previous</span>
</ng-template>
<ng-template #nextTemplate>
<span>next</span>
</ng-template>
<ng-template let-item let-i="index" #itemTemplate>
<div style="min-width: 200px">
<b *ngIf="i === selectedIndex">{{i}}. {{item.name}}</b>
<span *ngIf="i !== selectedIndex">{{i}}. {{item.name}}</span>
</div>
</ng-template>Based on @angular/cli(https://angular.io/guide/creating-libraries)