npm i ngx-image-swiper
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxImageSwiperModule } from 'ngx-image-swiper'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, NgxImageSwiperModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {} |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { Component } from '@angular/core'; import { NgxSwiperConfig } from 'ngx-image-swiper'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { swiperConfig: NgxSwiperConfig = { navigation: true, navigationPlacement: 'inside', pagination: true, paginationPlacement: 'outside' }; images = [ 'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg', 'https://images.pexels.com/photos/2395264/pexels-photo-2395264.jpeg', 'https://images.pexels.com/photos/2474014/pexels-photo-2474014.jpeg', 'https://images.pexels.com/photos/2440296/pexels-photo-2440296.jpeg', 'https://images.pexels.com/photos/2506269/pexels-photo-2506269.jpeg' ]; nav() { this.swiperConfig.navigation = !this.swiperConfig.navigation; } imgClicked(index: number) { console.log('imgClicked:', index); } } |
app.component.html
|
1 2 3 4 5 6 7 |
<div class="demo"> <h1>NGX Image Swiper</h1> <button (click)="nav()">{{ swiperConfig.navigation ? 'Disable Nav' : 'Enable Nav' }}</button> <div class="image-swiper"> <ngx-image-swiper [config]="swiperConfig" [images]="images" (imageClick)="imgClicked($event)"></ngx-image-swiper> </div> </div> |
FULL SOURCE CODE
