Image Transition Slider In Angular 11

In this article, we’ll learn image transition slider in Angular. For that, we used the “ngx-acuw” module. ngx-acuw is a collection of components for Angular made with the 3D library three.js.
Let’s create a new project to implement pdf viewer in angular for that you need to run the following command to create a project.


ng new image-transition

“image-transition” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd image-transition”. To Run angular applications, it required to run “ng serve”.


After that, we need to install the ngx-acuw npm package in our application. For that run the below command to install.


//dependencies 
npm install three @types/three @angular/cdk
// main package
npm install ngx-acuw

After installing the module, we need to put it in our “app.module.ts” file so we can use it in our code. below is the code need to update in the “app.module.ts” files.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { ImageTransitionModule } from 'ngx-acuw';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ImageTransitionModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Let’s add the below code in our app.component.ts file to make slider images


import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  imageUrls: string[] = [
    'https://images.unsplash.com/photo-1621343722485-aa2a26d31543',
    'https://images.unsplash.com/photo-1598361621183-3f5c55b34c97',
    'https://images.unsplash.com/photo-1621266989746-b7583fa20808',
    'https://images.unsplash.com/photo-1621271427915-3990c89d3657'
  ];
}

below code need to “app.component.html” file.


<h2 class="header">Image Transition </h2>
<span>
  Photo by

  <a href="https://unsplash.com" target="_blank">Unsplash</a>
</span>
<div class="container" (click)="imageTransition.next()">
  <lib-image-transition #imageTransition [imageUrls]="imageUrls" [autoPlay]="true"></lib-image-transition>
</div>



Output

Below is the full embeded code for image transition in angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •