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.