Angular 13 Image Slider with Lightbox Tutorial with Example

Angular 13 Image Slider or Carousel with Lightbox tutorial; Throughout this quick guide, you will learn how to seamlessly integrate the image slider with Lightbox in the angular app using the ng-image-slider npm package.

The ng-image-slider is a handy and impeccable carousel package, which helps you implement a responsive image slider with a Lightbox popup in angular.

It doesn’t limit to responsive support but also comes with extensive features. For instance, it captures swipes from phones and tablets, compatibility with Angular Universal, display images files with Lightbox popup on click.

It supports keyboard key events for the next/previous arrow key, and most importantly, it smoothly handles runtime image ArrayList updates.

Install Angular App

Creating a new angular project is not possible if you don’t have angular cli set on your development machine, hence use command to install the angular CLI tool:

npm install -g @angular/cli

Now, you can use given below command to install a new angular app:

ng new angular-lightbox-carousel-demo

Type following command on terminal to move into the app:

cd angular-lightbox-carousel-demo

Install Angular Image Slider Package

You can use the following node package manager command to install ng-image-slider package into angular project:

npm i ng-image-slider --force

Add NgImageSliderModule in App Module

In the subsequent step, you have to import NgImageSliderModule from ‘ng-image-slider’ package, apart from this register light-box carousel module in app module.

Open and add the suggested code in app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgImageSliderModule } from 'ng-image-slider';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgImageSliderModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Integrate Image Lightbox Carousel in Angular

In this step, we will show you the image lightbox slider integration in the angular app; fret not. We need some images.

Wherefore we will create a simple object and add some image files in the object, and the image object item contains image, thumbImage, alt and title.

Head over to app.component.ts file, and place the suggested code:

import { Component } from '@angular/core';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  constructor() { }

  ngOnInit(): void { }
   
  imgCollection: Array<object> = [
      {
        image: 'https://loremflickr.com/g/600/400/paris',
        thumbImage: 'https://loremflickr.com/g/1200/800/paris',
        alt: 'Image 1',
        title: 'Image 1'
      }, {
        image: 'https://loremflickr.com/600/400/brazil,rio',
        thumbImage: 'https://loremflickr.com/1200/800/brazil,rio',
        title: 'Image 2',
        alt: 'Image 2'
      }, {
        image: 'https://loremflickr.com/600/400/paris,girl/all',
        thumbImage: 'https://loremflickr.com/1200/800/brazil,rio',
        title: 'Image 3',
        alt: 'Image 3'
      }, {
        image: 'https://loremflickr.com/600/400/brazil,rio',
        thumbImage: 'https://loremflickr.com/1200/800/brazil,rio',
        title: 'Image 4',
        alt: 'Image 4'
      }, {
        image: 'https://loremflickr.com/600/400/paris,girl/all',
        thumbImage: 'https://loremflickr.com/1200/800/paris,girl/all',
        title: 'Image 5',
        alt: 'Image 5'
      }, {
        image: 'https://loremflickr.com/600/400/brazil,rio',
        thumbImage: 'https://i.picsum.photos/id/609/400/350.jpg',
        title: 'Image 6',
        alt: 'Image 6'
      }
  ];
  
}

You can quite easily integrate Image Slider with Lightbox in Angular using the ng-image-slider directive; the [images] property takes the image object and display those images in the carousel and lightbox simultaneously.

Get to the app.component.html file, and add the suggested code:

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

Run Angular App

Type the recommended command on the terminal to start the angular app:

ng serve

Ultimately, you can type the following url on the browser’s address bar and test the app:

http://localhost:4200

Conclusion

Eventually, we have completed Angular Image Carousel with Lightbox tutorial; In this profound post we have learned how to create the Lightbox popup image slider in angular app with the help of third-party ng-image-slider library.