Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library

To create an image carousel and video gallery lightbox modal slider in an Angular 10 application using the ng-image-slider library, follow these steps:

Create a new Angular 10 project using the Angular CLI:

ng new ng-image-slider-app

Install the ng-image-slider library using the following command:

npm install ng-image-slider --save

Import the NgImageSliderModule module in the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgImageSliderModule } from 'ng-image-slider';

import { AppComponent } from './app.component';

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

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, NgImageSliderModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

Create a new component for the image slider using the following command:

ng generate component image-slider

Add the following code to the image-slider.component.html file to create an image slider with captions:

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

<div class="row">
  <div class="col-md-12">
    <div class="image-gallery">
      <div class="thumbnail">
        <img
          *ngFor="let image of imageObject"
          [src]="image.thumbImage"
          [alt]="image.title"
          (click)="nav.slideTo(image.id)"
        />
        <div class="caption">
          <h4>{{ image.title }}</h4>
          <p>{{ image.description }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

<img

*ngFor="let image of imageObject"

[src]="image.thumbImage"

[alt]="image.title"

(click)="nav.slideTo(image.id)"

<h4>{{ image.title }}</h4>

<p>{{ image.description }}</p>

</div>

Add the following code to the image-slider.component.ts file to define the image slider properties:

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['./image-slider.component.css']
})
export class ImageSliderComponent {
  imageObject: Array<object> = [
    {
      image: 'https://i.imgur.com/ybZQ4xl.jpg',
      thumbImage: 'https://i.imgur.com/ybZQ4xl.jpg',
      title: 'Image 1',
      description: 'Description 1',
      id: '1'
    },
    {
      image: 'https://i.imgur.com/5hR24Ol.jpg',
      thumbImage: 'https://i.imgur.com/5hR24Ol.jpg',
      title: 'Image 2',
      description: 'Description 2',
      id: '2'
    },
    {
      image: 'https://i.imgur.com/7eU2W9s.jpg',
      thumbImage: 'https://i.imgur.com/7eU2W9s.jpg',
      title: 'Image 3',
      description: 'Description 3',
      id: '3'
    }
  ];
}

import { Component } from '@angular/core';

@Component({

selector: 'app-image-slider',

templateUrl: './image-slider.component.html',

styleUrls: ['./image-slider.component.css']

})

export class ImageSliderComponent {

imageObject: Array<object> = [

{

image: 'https://i.imgur.com/ybZQ4xl.jpg',

thumbImage: 'https://i.imgur.com/ybZQ4xl.jpg',

title: 'Image 1',

description: 'Description 1',

id: '1'

{

image: 'https://i.imgur.com/5hR24Ol.jpg',

thumbImage: 'https://i.imgur.com/5hR24Ol.jpg',

title: 'Image 2',

description: 'Description 2',

id: '2'

{

image: 'https://i.imgur.com/7eU2W9s.jpg',

thumbImage: 'https://i.imgur.com/7eU2W9s.jpg',

title: 'Image 3',

description: 'Description 3',

id: '3'

}

];

}

Add the following CSS code to the image-slider.component.css file to style the image slider and the image gallery:

.image-gallery {
  margin-top: 20px;
  text-align: center;
}

.thumbnail {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px;
  width: 100%;
}

.image-gallery {

margin-top: 20px;

text-align: center;

}

.thumbnail {

display: inline-block;

margin-right: 10px;

margin-bottom: 10px;

position: relative;

cursor: pointer;

}

.caption {

position: absolute;

bottom: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

padding: 5px;

width: 100%;

}