3D Carousel Slider In Angular 11

In this article, we’ll learn 3D Carousel 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 3D Carousel in angular for that you need to run the following command to create a project.


ng new 3d-carousel

“3d-carousel” 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 3d-carousel”. 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 { AppComponent } from "./app.component";
import { CarouselModule } from "ngx-acuw";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CarouselModule,
    BrowserAnimationsModule
  ],
  declarations: [AppComponent],
  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.


<div class="container">
  <h1 class="header">3D carousel demo</h1>

  <p class="centered-text">
    Photos by

    <a href="https://unsplash.com/" target="_blank">Unsplash</a>
  </p>

  <!-- Rotate buttons -->
  <div class="roate-button-container">
    <button aria-label="privious button" (click)="carousel.previous()">
      Previous
    </button>
    <button aria-label="next button" (click)="carousel.next()">Next</button>
  </div>

  <!-- Carousel -->
  <acuw-carousel #carousel class="carousel">
    <acuw-carousel-item
      *ngFor="let item of carouselItemsnew;index as i"
      class="carousel-item"
    >
      <h2>Item {{ i+1 }}</h2>
      <img [src]="item" height="300" />
    </acuw-carousel-item>
  </acuw-carousel>
</div>



Output

Below is the full embeded code for 3D Carousel in angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •