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


@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)
    });
    
  };
}

 

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

 

 

 

 

 

 

Leave a Reply