Angular 8/9 Image Slider with Lightbox using ng-image-slider Tutorial

In this tutorial, we will discuss a simple awesome image slider with a great feature to show a full-screen lightbox of full image on click.

This image slider is created by Sanjay Verma and loaded with many features required for a web layout based application.

A user can click on an image in the slider to view its original size image in full screen. Besides this catching feature, it supports autoplay, infinite, animation control, etc.

Install Image Slider

Run following NPM command in terminal to install Image Slider package in the project:

$ npm install ng-image-slider

Update App Module

Now open app.module.ts file to import NgImageSliderModule then add in imports array as shown below:

import { NgImageSliderModule } from 'ng-image-slider';
...
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgImageSliderModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})
 
export class AppModule {
}

Add Slider in Component

To create a slider add the ng-image-slider directive with [images] input property which takes an object with image paths:

<ng-image-slider [images]="imageObject" #nav></ng-image-slider>

Update Component Class with Object

// image-slider-demo.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-slider-demo',
  templateUrl: './image-slider-demo.component.html',
  styleUrls: ['./image-slider-demo.component.scss']
})
export class ImageSliderDemoComponent implements OnInit {

  imageObject: Array<object> = [{
    image: 'https://i.picsum.photos/id/580/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/580/400/350.jpg',
    alt: 'alt of image',
    title: 'title of image'
  }, {
    image: 'https://i.picsum.photos/id/838/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/838/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }, {
    image: 'https://i.picsum.photos/id/93/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/93/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }, {
    image: 'https://i.picsum.photos/id/543/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/543/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }, {
    image: 'https://i.picsum.photos/id/613/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/613/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }, {
    image: 'https://i.picsum.photos/id/609/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/609/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }, {
    image: 'https://i.picsum.photos/id/717/1020/600.jpg',
    thumbImage: 'https://i.picsum.photos/id/717/400/350.jpg',
    title: 'Image title',
    alt: 'Image alt'
  }
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

Here we have thumbImage is shown in slider and on clicking on that open up the original image path provided in image property ob object for each slide.

Check more properties and event available here