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.

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


@NgModule({
  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>

</ng-image-slider>

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");

@Component({
  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() {
    this.pushImages()
  }

  pushImages = async () => {
    var response = await randomImageJs.getWallpapers({get:50});
    console.log(response)
    response.forEach(image => {
      var obj = {
        image:image.thumbnail,
        thumbImage:image.thumbnail,
        title:image.title,
        alt:image.title
      }
      this.imageObject.push(obj)
    });
    
  };
}