D-Net

import {Component, Input} from '@angular/core';

@Component({

  selector: 'gif-slider',

  template: `

    <div class="uk-position-relative uk-height-max-large" tabindex="-1" uk-slideshow="animation: fade; autoplay: true; autoplay-interval: 4000; pause-on-hover: false">

      <ul class="uk-slideshow-items">

        <li *ngFor="let gif of gifs" >

          <div class="uk-flex uk-flex-middle uk-padding" uk-grid>

            <div class="uk-width-1-2">

              <img [attr.src]="gif.gif">

            </div>

            <div class="uk-width-1-2">

              <h1 style="font-size: 28px">{{gif.header}}</h1>

              <div class="uk-text-large"> {{gif.text}}</div>

              <div *ngIf="link" class="uk-inline uk-margin-large-top uk-margin-bottom">

                <a class="uk-button portal-button uk-text-uppercase" [routerLink]="route" routerLinkActive="router-link-active">{{linkTitle}}</a>

              </div>

            </div>

          </div>

        </li>

      </ul>

    </div>`

})

export class GifSliderComponent {

  @Input() gifs: {"gif": string, "header": string, "text"}[] = [];

  @Input() link = false;

  @Input() route = null;

  @Input() linkTitle = null;

}