Angular Tutorials

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago