@silmar/ng-carousel

@silmar/ng-carousel

Really simple carousel

Install

npm i @silmar/ng-carousel hammerjs
// or
yarn add @silmar/ng-carousel hammerjs

Usage

The very basic usage is as follows:

main.ts

// ....
import 'hammerjs';
// ....

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {NgCarouselModule} from '@silmar/ng-carousel';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgCarouselModule // <-- import the carousel module
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html

<!-- this will create a carousel with 2 visible items per slide -->
<si-ng-carousel [visible]="2">
  <div *ngFor="let img of gallery" siCarouselItem>
    <img [src]="domS.bypassSecurityTrustResourceUrl(img)" style="height: 400px"/>
  </div>
</si-ng-carousel>

Demo

Visit the demo