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.
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 |
<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.
|
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 33 |
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) }); }; } |
