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.
