Implements Responsiveness in Stack Slider

src/app/home/stack-slider/stack-slider.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectorRef, Component, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, HostListener, ViewChild} from '@angular/core';
 import {NgxGlideComponent} from "ngx-glide";
 import {Stack} from "../../shared/model/stack/stack.model";
 
@@ -47,18 +47,27 @@ export class StackSliderComponent implements AfterViewInit {
 
     constructor(private cd: ChangeDetectorRef) { }
 
+    @HostListener('window:resize', ['$event'])
+    onResize(event: any) {
+        const numberOfCards = this.getNumberOfCards(event.target.innerWidth);
+        this.buildCarousel(numberOfCards);
+    }
+
     ngAfterViewInit(): void {
-        if (this.ngxGlide)
+        if (this.ngxGlide) {
-            this.buildCarousel();
+            const numberOfCards = this.getNumberOfCards(window.innerWidth);
+            this.buildCarousel(numberOfCards);
+        }
 
         this.cd.detectChanges();
     }
 
-    buildCarousel(): void {
+    buildCarousel(numberOfCards: number): void {
+        this.ngxGlide.perView = numberOfCards;
+
         this.ngxGlide.showArrows = false;
         this.ngxGlide.showBullets = false;
         this.ngxGlide.type = 'carousel';
-        this.ngxGlide.perView = 5;
         this.ngxGlide.focusAt = 'center';
         this.ngxGlide.gap = 10;
         this.ngxGlide.autoplay = 3000;
@@ -73,4 +82,18 @@ export class StackSliderComponent implements AfterViewInit {
     isInFocus(stack: Stack): boolean {
         return this.stacks.indexOf(stack) === this.currentIndex;
     }
+
+    private getNumberOfCards(windowWidth: number): number {
+        if (windowWidth <= 412) {
+            return 1;
+        } else if (windowWidth <= 768) {
+            return 2;
+        } else if (windowWidth <= 975) {
+            return 3;
+        } else if (windowWidth <= 1440) {
+            return 4;
+        } else {
+            return 5;
+        }
+    }
 }