slidechange

src/app/home/carousel/carousel.component.ts

@@ -27,8 +27,10 @@ export class CarouselComponent implements AfterViewInit {
 
   next() {
     if (this.currentSlide + 1 === this.items.length) return;
+    console.log(this.items);
+    console.log(this.itemWidth);
     this.currentSlide = (this.currentSlide + 1) % this.items.length;
-    const offset = this.currentSlide * this.itemWidth;
+    const offset = this.currentSlide * 404;
     const myAnimation: AnimationFactory = this.buildAnimation(offset);
     this.player = myAnimation.create(this.carousel.nativeElement);
     this.player.play();

src/app/home/carousel/carousel.html

 <section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
     <ul class="carousel-inner" #carousel>
-        <li *ngFor="let item of items;" class="carousel-item">
-            <ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
+        <li *ngFor="let item of items;" class="carousel-item" >
+          <ng-container  [ngTemplateOutlet]="item.tpl"></ng-container> 
         </li>
     </ul>
 </section>

src/app/home/carousel/carousel.scss

@@ -7,4 +7,12 @@
             width: auto;
         }
     }
+}
+
+.carousel-inner {
+    display: flex;
+    width: max-content;
+    .carousel-item{
+        width: 404px !important;
+    }
 }
\ No newline at end of file