design fix

src/app/directives/carousel.directive.ts

-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, Input } from '@angular/core';
 
 @Directive({
     selector: '[carouselItem]'
 })
 export class CarouselDirective {
-
+    @Input() type: string;
     constructor(public tpl: TemplateRef<any>) {
+        this.tpl['name'] = 1;
     }
 
 }
\ No newline at end of file

src/app/home/carousel/carousel.html

 <section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
-    <ul class="carousel-inner" #carousel>
+    <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>

src/app/home/destination/destination.component.html

+
 <div class="destination_slider">
-    <carousel>
-        <ng-container *ngFor="let item of items;">
-            <ng-container *carouselItem>
-                <div class="inner_slider">
-                    <div class="inner_overlay">
-                        <h4>{{item.place}}</h4>
-                        <h6>
-                            <strong>
-                         Starting from
-                       </strong> <br>${{item.price}}
-                        </h6>
-                    </div>
-                    <img src={{item.image}}>
-                </div>
-            </ng-container>
-        </ng-container>
-    </carousel>
+<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
+    <div style="width: 2000px" class="carousel-inner" #carousel>
+        <div class="inner_slider" *ngFor="let item of items;">
+            <div class="inner_overlay">
+                <h4>{{item.place}}</h4>
+                <h6>
+                    <strong>
+                    Starting from
+                </strong> <br>${{item.price}}
+                </h6>
+            </div>
+            <img src={{item.image}}>
+        </div>
+    </div>
+    </section>
 </div>
\ No newline at end of file

src/app/home/destination/destination.component.scss

 .destination_slider {
     padding: 10px;
     padding-top: 0px;
+    display: flex;
     .slick-slide {
         margin: 0 5px;
     }
@@ -45,4 +46,16 @@
             }
         }
     }
+}
+.carousel-wrapper {
+    min-width: 100%;
+    ul {
+        margin: 0px;
+        padding: 0px;
+    }
+}
+
+.carousel-inner {
+    display: flex;
+    width: max-content;
 }
\ No newline at end of file

src/app/home/destination/destination.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } from '@angular/animations';
 
 @Component({
   selector: 'ati-destination',
   templateUrl: './destination.component.html',
   styleUrls: ['./destination.component.scss']
 })
-export class DestinationComponent implements OnInit {
+export class DestinationComponent implements OnInit,  AfterViewInit {
 
   items: any;
+  type: any;
+  @ViewChild('carousel', {static: false}) private carousel: ElementRef;
+  @Input() timing = '750ms ease-in';
+  @Input() showControls = true;
+  private player: AnimationPlayer;
+  private itemWidth: number;
+  private currentSlide = 0;
+  carouselWrapperStyle = {};
+  slideWidth: any;
 
-  constructor() { }
+  constructor(private builder: AnimationBuilder) {
+    this.type = 'destination';
+  }
 
   ngOnInit() {
     this.items = [
@@ -24,6 +36,38 @@ export class DestinationComponent implements OnInit {
     ]
   }
 
+  next() {
+    this.currentSlide = (this.currentSlide + 1) % 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();
+  }
+
+  private buildAnimation(offset) {
+    return this.builder.build([
+      animate(this.timing, style({ transform: `translateX(-${offset}px)` }))
+    ]);
+  }
+
+  ngAfterViewInit() {
+    const count = this.items.length;
+    this.slideWidth = count * this.itemWidth;
+    setTimeout(() => {
+      // this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
+      this.itemWidth = window.innerHeight;
+      console.log(this.itemWidth);
+      this.carouselWrapperStyle = {
+        width: `${this.slideWidth}px`
+      };
+    });
+  
+    setInterval(() => {
+      this.itemWidth = 50 * 4;
+      this.next();
+    }, 2000);
+  }
+
 
 
 

src/app/home/offers/offers.component.html

-<div class="offer_slider">
-    <carousel>
-        <ng-container *ngFor="let item of items;">
-            <ng-container *carouselItem>
-
+<carousel>
+    <ng-container *ngFor="let item of items;">
+        <ng-container *carouselItem>
+            <div class="offer_slider">
                 <div class="slide">
                     <div class="inner_slider">
                         <div class="content_inner">
@@ -20,7 +19,8 @@
                     </div>
                     <img src="../../../assets/offer/bottom_ribbon.png">
                 </div>
-            </ng-container>
+            </div>
+
         </ng-container>
-    </carousel>
-</div>
\ No newline at end of file
+    </ng-container>
+</carousel>
\ No newline at end of file

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

@@ -8,8 +8,10 @@ import {Component, OnInit} from '@angular/core';
 export class OffersComponent {
 
   items: any;
+  type: any;
 
   ngOnInit() {
+    this.type = 'offer';
     this.items = [
       { 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' },