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:
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 {} |
- 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:
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> |
- Add the following code to the image-slider.component.ts file to define the image slider properties:
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' } ]; } |
- 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%; } |