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 {}

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>

<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'

}

];

}

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%;

}