changes

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

 // tslint:disable-next-line:max-line-length
-import { AfterViewInit, Component, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren, HostListener } from '@angular/core';
 import { CarouselDirective } from './../../directives/carousel.directive';
 import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } from '@angular/animations';
 
@@ -8,7 +8,7 @@ import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } f
 })
 export class CarouselItemElement {
 }
-
+@HostListener('window:resize', ['$event'])
 @Component({
   selector: 'carousel',
   exportAs: 'carousel',
@@ -19,7 +19,7 @@ export class CarouselComponent implements AfterViewInit {
   @ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>;
   @ViewChildren(CarouselItemElement, { read: ElementRef }) private itemsElements: QueryList<ElementRef>;
   @ViewChild('carousel', {static: false}) private carousel: ElementRef;
-  @Input() timing = '250ms ease-in';
+  @Input() timing = '750ms ease-in';
   @Input() showControls = true;
   private player: AnimationPlayer;
   private itemWidth: number;
@@ -27,7 +27,9 @@ export class CarouselComponent implements AfterViewInit {
   carouselWrapperStyle = {};
 
   next() {
-    if (this.currentSlide + 1 === this.items.length) return;
+    if (this.currentSlide + 1 === this.items.length) {
+        this.currentSlide = -1;
+    }
     this.currentSlide = (this.currentSlide + 1) % this.items.length;
     const offset = this.currentSlide * this.itemWidth;
     const myAnimation: AnimationFactory = this.buildAnimation(offset);
@@ -41,30 +43,26 @@ export class CarouselComponent implements AfterViewInit {
     ]);
   }
 
-  prev() {
-    if (this.currentSlide === 0) return;
-
-    this.currentSlide = ((this.currentSlide - 1) + this.items.length) % this.items.length;
-    const offset = this.currentSlide * this.itemWidth;
-
-    const myAnimation: AnimationFactory = this.buildAnimation(offset);
-    this.player = myAnimation.create(this.carousel.nativeElement);
-    this.player.play();
-  }
-
   constructor(private builder: AnimationBuilder) {
-    console.log(this.items);
+    this.itemWidth = window.innerWidth;
   }
 
   ngAfterViewInit() {
     // For some reason only here I need to add setTimeout, in my local env it's working without this.
     setTimeout(() => {
-      this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
+      // this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
+      this.itemWidth = window.innerHeight;
+      console.log(this.itemWidth);
       this.carouselWrapperStyle = {
         width: `${this.itemWidth}px`
-      }
+      };
     });
 
+    setInterval(() => {
+      this.itemWidth = window.innerWidth;
+      this.next();
+    }, 3000);
+
   }
 
 }

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">
+    <ul class="carousel-inner" #carousel >
+        <li *ngFor="let item of items;" class="carousel-item" [ngStyle]="{'width.px':itemWidth}">
             <ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
         </li>
     </ul>
 </section>
-<div *ngIf="showControls" style="margin-top: 1em">
+<!-- <div *ngIf="showControls" style="margin-top: 1em">
     <button (click)="next()" class="btn btn-default">Next</button>
     <button (click)="prev()" class="btn btn-default">Prev</button>
-</div>
+</div> -->
\ No newline at end of file

src/app/home/carousel/carousel.scss

@@ -11,4 +11,5 @@
 
 .carousel-inner {
     display: flex;
+    width: max-content;
 }
\ No newline at end of file

src/app/home/offers/offers.component.ts

@@ -11,9 +11,9 @@ export class OffersComponent {
 
   ngOnInit() {
     this.items = [
-      { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500'  },
-      { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
-      { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
+      { title: 'Airfares starting at Rs. 399*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Home..', code: 'AT 500'  },
+      { title: 'Airfares starting at Rs. 599*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Home..', code: 'AT 500' },
+      { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Home..', code: 'AT 500' },
     ]
   }