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:

Update App Module

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

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:

Update Component Class with Object

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

Leave a Reply

Notify of