D-Net

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

@Component({

  selector: 'gif-slider',

  template: `

    <div tabindex="-1" [attr.uk-slider]="'velocity: ' + velocity + 

                                        ';autoplay: '+ autoplay + 

                                        ';autoplay-interval: ' + autoplayInterval + 

                                        ';pause-on-hover: ' + pauseOnHover + 

                                        ';center: ' + center">

     <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-padding uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>

            <div>

              <img [attr.src]="gif.gif" class="uk-box-shadow-large uk-border-rounded" loading="lazy">

            </div>

            <div [ngClass]="(gifRight)?'uk-flex-first':''" class="uk-margin-top">

              <div>

                <div class="uk-text-bold uk-h4">{{gif.header}}</div>

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

                <div *ngIf="link" class="uk-inline">

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

                </div>

              </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;

  @Input() velocity = 0;

  @Input() autoplay = true;

  @Input() autoplayInterval = 4000;

  @Input() pauseOnHover = false;

  @Input() center = true;

}