openaire-library/utils/gif-slider/gif-slider.component.ts

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

@Component({
  selector: 'gif-slider',
  template: `
    <div tabindex="-1" uk-slider="velocity: 0; autoplay: true; autoplay-interval: 4000; pause-on-hover: false; center: true">
     <div class="uk-slider-container">
      <ul class="uk-slider-items uk-child-width-1-1">
        <li *ngFor="let gif of gifs">
          <div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
            <div>
              <img [attr.src]="gif.gif">
            </div>
            <div [ngClass]="(gifRight)?'uk-flex-first':''">
              <h1>{{gif.header}}</h1>
              <div > {{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>
      <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
     </div>
    </div>`
})

export class GifSliderComponent {
  @Input() gifs: {"gif": string, "header": string, "text"}[] = [];
  @Input() link = false;
  @Input() route = null;
  @Input() linkTitle = null;
  @Input() gifRight = false;

}