ng2-card-slider

Slider module based on angular-cli and @angular/animation

install

npm i ng2-card-slider

import

import { CardSliderModule } from 'ng2-card-slider';

use

html:

<p>
    <label for="columns">Select columns:</label>
    <select id="columns" [(ngModel)]="columns">
        <option [ngValue]="'x1'">1</option>
        <option [ngValue]="'x2'">2</option>
        <option [ngValue]="'x3'">3</option>
        <option [ngValue]="'x4'">4</option>
        <option [ngValue]="'x5'">5</option>
    </select>
</p>

<card-slider #slider class="container" [items]="items" [size]="columns" (cardClick)="clickToCard($event)"></card-slider>

<p>
    <button class="left"  (click)="slider.prev()" [disabled]="!slider.showPrev">prev</button>
    <button class="right" (click)="slider.next()" [disabled]="!slider.showNext">next</button>
</p>

<p>
    <span>Item: </span>{{item | json}}
</p>

css:

.container {
    display: block;
    width: 100%;
    height: 500px;
}

input:

columns = 'x1' | 'x2' | 'x3' | 'x4' | 'x5';

 items = [
     { id: 1,  title: 'Item Title #1',  backgroundImage: './assets/image1.jpg' },
     { id: 2,  title: 'Item Title #2',  backgroundColor: 'green' },
     { id: 3,  backgroundImage: './assets/image1.jpg' },
     { id: 4,  title: 'Item Title #3',  backgroundColor: 'maroon' },
     { id: 5,  title: 'Item Title #4',  backgroundColor: 'red' },
     { id: 6,  title: 'Item Title #5',  backgroundColor: 'orange' },
     { id: 7,  title: 'Item Title #6',  backgroundColor: 'yellow' },
     { id: 8,  title: 'Item Title #7',  backgroundColor: 'olive' },
     { id: 9,  title: 'Item Title #8',  backgroundColor: 'purple' },
     { id: 10, title: 'Item Title #9',  backgroundColor: 'fuchsia' },
     { id: 11, title: 'Item Title #10', backgroundColor: 'lime' },
 ]

clickToCard(item): any {
     console.log(item);
}