Post
Ask Question

How To Create Carousel For Components Using Simple CSS

In this article, you will see how to create a carousel using CSS. Yes, you heard it right, no jQuery, no JavaScript, and no angular routing animations.
 
Let’s get started!
 
Step 1
 
Create the angular project,
 
ng new CSSCarousel
 
Step 2
 
Create parent component,
 
ng generate component parent
 
Step 3
 
Create child component1,
 
ng generate component component1
 
Step 4
 
Create child component2,
 
ng generate component component2
 
To open the source code in Visual studio enter the command Code.  in command prompt.
 
Step 5
 
Add a wrapper file named wrapper.ts in the app folder as shown in the below picture along with created components,

 
Step 6
 
Make changes to wrapper.ts,
  1. import {Component} from '@angular/core';  
  2. @Component({   
  3.    selector:'wrapper-app',  
  4.    template:'<router-outlet></router-outlet>'   
  5. })  
  6. export class WrapperComponent{ }   
Step 7
 
Make changes to app.module.ts,
  1. import { BrowserModule } from '@angular/platform-browser';   
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';   
  4. import { ParentComponent } from './parent/parent.component';   
  5. import { Component1Component } from './component1/component1.component';   
  6. import { Component2Component } from './component2/component2.component';   
  7. import { WrapperComponent } from "src/app/wrapper";  
  8. @NgModule({  
  9.    declarations: [ ParentComponent, Component1Component, Component2Component, WrapperComponent ],  
  10.    imports: [ BrowserModule, AppRoutingModule ],  
  11.    providers: [], bootstrap: [WrapperComponent]   
  12. })   
  13. export class AppModule { }   
Step 8
 
Make changes to index.html,
  1. <!doctype html>   
  2. <html lang="en">   
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.          <title>CSSCarousel</title>  
  6.          <base href="/">  
  7.       <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.       <link rel="icon" type="image/x-icon" href="favicon.ico">   
  9.    </head>   
  10.    <body>  
  11.       <wrapper-app></wrapper-app>   
  12.    </body>   
  13. </html>   
Step 9
 
Make changes to component1.html
  1. <div>  
  2.    <h1 style="background-color: coral; opacity:0.5; text-align: center;">Component 1 Component 1 Component 1 </h1>   
  3. </div>   
Step 10
 
Make changes to component2.html,
  1. <div>  
  2.    <h1 style="background-color:crimson; opacity:0.5; text-align: center;">Component 2 Component 2 Component 2</h1>  
  3. </div>  
Step 11
 
Make changes to parent component.html,
  1. <div class="container">  
  2.     <div class="col-md-12">  
  3.         <button class="right-button" (click)="moveRight()">Right</button>  
  4.         <button class="left-button" (click)="moveLeft()">Left</button>  
  5.         <div *ngIf="isRefresh" class="component-container">  
  6.             <app-component1></app-component1>  
  7.         </div>  
  8.         <div *ngIf="buttonClicked==='left'" class="component-container">  
  9.             <app-component1 [ngClass]="{'left-active':!isLeft,'left':isLeft}"></app-component1>  
  10.         </div>  
  11.         <div *ngIf="buttonClicked==='left'" class="component-container">  
  12.             <app-component2 [ngClass]="{'left-active':isLeft,'left':!isLeft}"></app-component2>  
  13.         </div>  
  14.         <div *ngIf="buttonClicked==='right'" class="component-container">  
  15.             <app-component1 [ngClass]="{'right-active':isRight,'right':!isRight}"></app-component1>  
  16.         </div>  
  17.         <div *ngIf="buttonClicked==='right'" class="component-container">  
  18.             <app-component2 [ngClass]="{'right-active':!isRight,'right':isRight}"></app-component2>  
  19.         </div>  
  20.     </div>  
  21. </div>   
Step 12
 
Make changes to parent component.ts,
  1. import {  
  2.     Component,  
  3.     OnInit  
  4. } from '@angular/core';  
  5. @Component({  
  6.     selector: 'app-parent',  
  7.     templateUrl: './parent.component.html',  
  8.     styleUrls: ['./parent.component.css']  
  9. })  
  10. export class ParentComponent implements OnInit {  
  11.     buttonClicked = "";  
  12.     isLeft: boolean = false;  
  13.     isRight: boolean = true;  
  14.     isRefresh: boolean = false;  
  15.     ngOnInit() {  
  16.         this.isRefresh = true;  
  17.     }  
  18.     moveLeft() {  
  19.         this.buttonClicked = "left";  
  20.         this.isLeft = !this.isLeft;  
  21.         this.isRefresh = false;  
  22.     }  
  23.     moveRight() {  
  24.         this.buttonClicked = "right";  
  25.         this.isRight = !this.isRight;  
  26.         this.isRefresh = false;  
  27.     }  
  28. }   
Step 13
 
Make changes to parent component.css,
  1. .right - button {  
  2.     float: right;  
  3.     cursor: pointer!important;  
  4.     position: fixed;  
  5.     top: 50 % ;right: 0;  
  6.     z - index: 999;  
  7.     width: 100 px;  
  8.     height: 50 px;  
  9.     background - color: darkmagenta;  
  10. }.left - button {  
  11.     cursor: pointer!important;  
  12.     position: fixed;  
  13.     top: 50 % ;  
  14.     left: 0;  
  15.     z - index: 999;  
  16.     width: 100 px;  
  17.     height: 50 px;  
  18.     background - color: darkmagenta;  
  19. }.component - container {  
  20.     width: 100 % ;  
  21.     height: 120 vh;  
  22.     overflow: hidden;  
  23.     position: absolute;  
  24.     top: 10 px;  
  25.     left: 0;  
  26.     z - index: 0;  
  27. }.left {  
  28.     position: relative;  
  29.     animation: slideLeftNone 1 s;  
  30.     opacity: 0;  
  31.     left: -100 % ;  
  32.     top: 0;  
  33. }.left - active {  
  34.     position: relative;  
  35.     opacity: 1;  
  36.     animation: slideLeftBlock 1 s;  
  37.     top: 0;  
  38.     left: 0 % ;  
  39. }.right {  
  40.     position: relative;  
  41.     animation: slideRightNone 1 s;  
  42.     opacity: 0;  
  43.     left: 100 % ;  
  44.     top: 0;  
  45. }.right - active {  
  46.     position: relative;  
  47.     opacity: 1;  
  48.     animation: slideRightBlock 1 s;  
  49.     left: 0 % ;  
  50.     top: 0;  
  51. }  
  52. @keyframes slideLeftNone {  
  53.     from {  
  54.         left: 0 % ;opacity: 1;  
  55.     }  
  56.     to {  
  57.         left: -100 % ;opacity: 0;  
  58.     }  
  59. }  
  60. @keyframes slideRightNone {  
  61.     from {  
  62.         left: 0 % ;opacity: 1;  
  63.     }  
  64.     to {  
  65.         left: 100 % ;opacity: 0;  
  66.     }  
  67. }  
  68. @keyframes slideRightBlock {  
  69.     from {  
  70.         left: -100 % ;  
  71.     }  
  72.     to {  
  73.         left: 0 % ;  
  74.     }  
  75. }  
  76. @keyframes slideLeftBlock {  
  77.     from {  
  78.         left: 100 % ;  
  79.     }  
  80.     to {  
  81.         left: 0 % ;  
  82.     }  
  83. }   
Step 14
 
Make changes to app-routing.module.ts,
  1. import { NgModule } from '@angular/core';   
  2. import { Routes, RouterModule } from '@angular/router';   
  3. import { ParentComponent } from './parent/parent.component';  
  4. const routes: Routes = [{  
  5.     path: '',  
  6.     component: ParentComponent,  
  7.     pathMatch: 'full'  
  8. }, {  
  9.     path: '**',  
  10.     redirectTo: '',  
  11.     pathMatch: 'full'  
  12. }];  
  13. @NgModule({  
  14.     imports: [RouterModule.forRoot(routes)],  
  15.     exports: [RouterModule]  
  16. })  
  17. export class AppRoutingModule {}   
Note
Remove app.component.html, app.component.ts, and app.component.css files from the solution before executing Step 15.
 
Step 15
 
Run ng-serve to check the output on http://localhost:4200/
 
The below picture depicts the end result of the CSSCarousel. If you click on the buttons, Component 1 and Component 2 will keep sliding as a carousel.
 
 
Download the GitHub repository here.


Similar Articles