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

48 lines
1.8 KiB
TypeScript
Raw Normal View History

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