Angular 10 Image and Video Lightbox Slider Using ng-image-slider Library Full Example 2020


Welcome folks today in this blog post we will be building a image and video lighbox slider in Angular 10 Full tutorial from scratch. All the source code will be given below. A step by step youtube video is shown below.






Get Started



In order to get started you need to install these dependencies inside your angular project


npm i ng-image-slider


npm i random-image-js


After installing these dependencies inside your app.module.ts file include the image slider library as shown below.

See also  Node.js Angular 9 Tutorial to Export PDF Documents Using PDFMake.js Library Using ng-pdf-make Directive Using Javascript Full Project For Beginners


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

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



Now inside your app.component.html file include the slider like this


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




Now inside the app.component.ts file copy paste the following code to it to get the random images and convert it to a image slider.



import { Component } from "@angular/core";
var randomImageJs = require("random-image-js");

  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  imageObject: Array<object> = [];
  urls: Array<String> = [];
  width: Number = 500;
  height: Number = 500;

  ngOnInit() {

  pushImages = async () => {
    var response = await randomImageJs.getWallpapers({get:50});
    response.forEach(image => {
      var obj = {


See also  Angular 10 Image Zoom (Magnifier Popup) Hover Effect Using ngx-img-zoom Library Full Tutorial







Leave a Reply