Angular Responsive Image Slider/ Carousel with Zoom – Lightbox Popup Example

Angular Image Slider Carousel Example with Zoom feature will be discussed in the upcoming tutorial. An Image Carousel or Slider with Lightbox effect shows a full/ large screen popup with the original image. That we’re going to discuss in this comprehensive tutorial by using the ng-image-slider library in Angular.

A lightbox or popup is a floating UI component that appears on top of the other page content. It is usually shown as focused content for users to take actions like filling up forms, mark content, show detailed data etc.

Today we will create an exquisite slider/ carousel in which a user can click on the image slide to view its full-sized / original image in popup or lightbox with zoom effect. Using ng-image-slider we can add responsive sliders which can adapt to any screen size.

How to Create Image Slider/ Carousel with Zoom in Angular application?

1. Setup Angular Project
2. Install NG Image Slider Package
3. Configure AppModule
4. Create Image Slider with Lightbox
5. Run the Application

 

Setup Angular Project

You need to have Angular CLI installed, which provide CLI command to create Angular project easily.

npm install -g @angular/cli

Next, run the ng command to create a new application or you can continue with existed Angular project if you already have one.

ng new angular-lightbox-slider-app

Enter into the project directory

cd angular-lightbox-slider-app

 

Install NG Image Slider Package

Now, open the terminal and install the ng-image-slider package into the Angular project.

npm install ng-image-slider

 

Configure AppModule

After installing the package, we need to import the NgImageSliderModule in the main app module to make it available throughout our application components.

Open the app.module.ts file and update as shown below:

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

 

Create Image Slider with Lightbox

We are ready to see the carousel working. To implement the Lightbox Slider, we will add the ng-image-slider directive in the template HTML. The [images] property binding will take the image Object.

Update the template HTML file.

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

 

Next, update the Component class with imageObject array, that will have various image properties including original image URL, thumbnail image, title and alt text.

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

export class AppComponent {

  constructor() { }

  ngOnInit(): void { }
   
  imageObject: Array<object> = [
      {
        image: 'https://via.placeholder.com/600.png/345',
        thumbImage: 'https://via.placeholder.com/1200.png/345',
        title: 'Slider Image 1',
        alt: 'Image Alt 1',
      }, {
        image: 'https://via.placeholder.com/600.png/643',
        thumbImage: 'https://via.placeholder.com/1200.png/643',
        title: 'Slider Image 2',
        alt: 'Image Alt 2'
      }, {
        image: 'https://via.placeholder.com/600.png/8w4',
        thumbImage: 'https://via.placeholder.com/1200.png/8w4',
        title: 'Slider Image 3',
        alt: 'Image Alt 3'
      }, {
        image: 'https://via.placeholder.com/600.png/347',
        thumbImage: 'https://via.placeholder.com/1200.png/347',
        title: 'Slider Image 4',
        alt: 'Image Alt 4'
      }, {
        image: 'https://via.placeholder.com/600.png/953',
        thumbImage: 'https://via.placeholder.com/1200.png/953',
        title: 'Slider Image 5',
        alt: 'Image Alt 5'
      }
  ];
  
}

 

Run the Application

Finally, we are done with implementation. so, to see it working you can execute the following command to serve the application in the browser.

ng serve --open

As a result, your application will be opened at the following URL.

http://localhost:4200

 

Conclusion

We are done with the tutorial showing the Angular image slider with a zoom effect to show a large image in the Lightbox popup. Do share your thoughts about this elegant package module. Thank…