Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on May 16, 2023

 

 

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:

 

 

  1. Create a new Angular 10 project using the Angular CLI:

 

 

ng new ng-image-slider-app
  1. Install the ng-image-slider library using the following command:
npm install ng-image-slider --save
  1. Import the NgImageSliderModule module in the app.module.ts file:
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
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 {}

 

 

  1. Create a new component for the image slider using the following command:
ng generate component image-slider
  1. Add the following code to the image-slider.component.html file to create an image slider with captions:

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

 

 

  1. Add the following code to the image-slider.component.ts file to define the image slider properties:
TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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'
    }
  ];
}

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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%;
}

 

 

 

 

 

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme