How To Create Carousel In Angular Project

In this article, we will learn how to create carousel in angular project

Create Angular Project

Now let’s create an Angular Project by using the following command,

ng new CSSCarousel

Create parent component,

ng generate component parent

Create child component1,

ng generate component component1

Create child component2,

ng generate component component2

Add a wrapper file named wrapper.ts in the app folder as shown in the below picture along with created components,

import {Component} from '@angular/core';  
@Component({   
   selector:'wrapper-app',  
   template:'<router-outlet></router-outlet>'   
})  
export class WrapperComponent{ }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';   
import { NgModule } from '@angular/core';  
import { AppRoutingModule } from './app-routing.module';   
import { ParentComponent } from './parent/parent.component';   
import { Component1Component } from './component1/component1.component';   
import { Component2Component } from './component2/component2.component';   
import { WrapperComponent } from "src/app/wrapper";  
@NgModule({  
   declarations: [ ParentComponent, Component1Component, Component2Component, WrapperComponent ],  
   imports: [ BrowserModule, AppRoutingModule ],  
   providers: [], bootstrap: [WrapperComponent]   
})   
export class AppModule { }

index.html

<!doctype html>   
<html lang="en">   
   <head>  
      <meta charset="utf-8">  
         <title>CSSCarousel</title>  
         <base href="/">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="icon" type="image/x-icon" href="favicon.ico">   
   </head>   
   <body>  
      <wrapper-app></wrapper-app>   
   </body>   
</html>

component1.html

<div>  
   <h1 style="background-color: coral; opacity:0.5; text-align: center;">Component 1 Component 1 Component 1 </h1>   
</div>

component2.html

<div>  
   <h1 style="background-color:crimson; opacity:0.5; text-align: center;">Component 2 Component 2 Component 2</h1>  
</div>

component.html

<div class="container">  
    <div class="col-md-12">  
        <button class="right-button" (click)="moveRight()">Right</button>  
        <button class="left-button" (click)="moveLeft()">Left</button>  
        <div *ngIf="isRefresh" class="component-container">  
            <app-component1></app-component1>  
        </div>  
        <div *ngIf="buttonClicked==='left'" class="component-container">  
            <app-component1 [ngClass]="{'left-active':!isLeft,'left':isLeft}"></app-component1>  
        </div>  
        <div *ngIf="buttonClicked==='left'" class="component-container">  
            <app-component2 [ngClass]="{'left-active':isLeft,'left':!isLeft}"></app-component2>  
        </div>  
        <div *ngIf="buttonClicked==='right'" class="component-container">  
            <app-component1 [ngClass]="{'right-active':isRight,'right':!isRight}"></app-component1>  
        </div>  
        <div *ngIf="buttonClicked==='right'" class="component-container">  
            <app-component2 [ngClass]="{'right-active':!isRight,'right':isRight}"></app-component2>  
        </div>  
    </div>  
</div>

Make changes to parent component.ts

import {  
    Component,  
    OnInit  
} from '@angular/core';  
@Component({  
    selector: 'app-parent',  
    templateUrl: './parent.component.html',  
    styleUrls: ['./parent.component.css']  
})  
export class ParentComponent implements OnInit {  
    buttonClicked = "";  
    isLeft: boolean = false;  
    isRight: boolean = true;  
    isRefresh: boolean = false;  
    ngOnInit() {  
        this.isRefresh = true;  
    }  
    moveLeft() {  
        this.buttonClicked = "left";  
        this.isLeft = !this.isLeft;  
        this.isRefresh = false;  
    }  
    moveRight() {  
        this.buttonClicked = "right";  
        this.isRight = !this.isRight;  
        this.isRefresh = false;  
    }  
}

Make changes to parent component.css,

.right - button {  
    float: right;  
    cursor: pointer!important;  
    position: fixed;  
    top: 50 % ;right: 0;  
    z - index: 999;  
    width: 100 px;  
    height: 50 px;  
    background - color: darkmagenta;  
}.left - button {  
    cursor: pointer!important;  
    position: fixed;  
    top: 50 % ;  
    left: 0;  
    z - index: 999;  
    width: 100 px;  
    height: 50 px;  
    background - color: darkmagenta;  
}.component - container {  
    width: 100 % ;  
    height: 120 vh;  
    overflow: hidden;  
    position: absolute;  
    top: 10 px;  
    left: 0;  
    z - index: 0;  
}.left {  
    position: relative;  
    animation: slideLeftNone 1 s;  
    opacity: 0;  
    left: -100 % ;  
    top: 0;  
}.left - active {  
    position: relative;  
    opacity: 1;  
    animation: slideLeftBlock 1 s;  
    top: 0;  
    left: 0 % ;  
}.right {  
    position: relative;  
    animation: slideRightNone 1 s;  
    opacity: 0;  
    left: 100 % ;  
    top: 0;  
}.right - active {  
    position: relative;  
    opacity: 1;  
    animation: slideRightBlock 1 s;  
    left: 0 % ;  
    top: 0;  
}  
@keyframes slideLeftNone {  
    from {  
        left: 0 % ;opacity: 1;  
    }  
    to {  
        left: -100 % ;opacity: 0;  
    }  
}  
@keyframes slideRightNone {  
    from {  
        left: 0 % ;opacity: 1;  
    }  
    to {  
        left: 100 % ;opacity: 0;  
    }  
}  
@keyframes slideRightBlock {  
    from {  
        left: -100 % ;  
    }  
    to {  
        left: 0 % ;  
    }  
}  
@keyframes slideLeftBlock {  
    from {  
        left: 100 % ;  
    }  
    to {  
        left: 0 % ;  
    }  
}

Make changes to app-routing.module.ts,

import { NgModule } from '@angular/core';   
import { Routes, RouterModule } from '@angular/router';   
import { ParentComponent } from './parent/parent.component';  
const routes: Routes = [{  
    path: '',  
    component: ParentComponent,  
    pathMatch: 'full'  
}, {  
    path: '**',  
    redirectTo: '',  
    pathMatch: 'full'  
}];  
@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]  
})  
export class AppRoutingModule {}

Run ng-serve to check the output on http://localhost:4200/

Hope you understand the article , If you still have any questions or queries then please let me know in the comment section, I’ll respond to you as soon as possible.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories