| 1 |
56184
|
k.triantaf
|
import {Component, Input} from '@angular/core';
|
| 2 |
|
|
|
| 3 |
|
|
@Component({
|
| 4 |
|
|
selector: 'gif-slider',
|
| 5 |
|
|
template: `
|
| 6 |
56217
|
k.triantaf
|
<div tabindex="-1" [attr.uk-slider]="'velocity: ' + velocity +
|
| 7 |
|
|
';autoplay: '+ autoplay +
|
| 8 |
|
|
';autoplay-interval: ' + autoplayInterval +
|
| 9 |
|
|
';pause-on-hover: ' + pauseOnHover +
|
| 10 |
|
|
';center: ' + center">
|
| 11 |
56206
|
k.triantaf
|
<div class="uk-slider-container">
|
| 12 |
56296
|
k.triantaf
|
<ul class="uk-slider-items uk-child-width-1-1">
|
| 13 |
56205
|
k.triantaf
|
<li *ngFor="let gif of gifs">
|
| 14 |
56278
|
k.triantaf
|
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
|
| 15 |
56205
|
k.triantaf
|
<div>
|
| 16 |
56241
|
k.triantaf
|
<img [attr.src]="gif.gif" class="uk-box-shadow-large uk-border-rounded">
|
| 17 |
56184
|
k.triantaf
|
</div>
|
| 18 |
56296
|
k.triantaf
|
<div [ngClass]="(gifRight)?'uk-flex-first':''" class="uk-margin-top">
|
| 19 |
|
|
<div>
|
| 20 |
56677
|
argiro.kok
|
<div class="uk-text-bold uk-h4">{{gif.header}}</div>
|
| 21 |
56324
|
k.triantaf
|
<div class="uk-margin-medium"> {{gif.text}}</div>
|
| 22 |
|
|
<div *ngIf="link" class="uk-inline">
|
| 23 |
|
|
<a class="uk-button portal-button uk-text-uppercase" [routerLink]="route" routerLinkActive="router-link-active">{{linkTitle}}</a>
|
| 24 |
|
|
</div>
|
| 25 |
56248
|
k.triantaf
|
</div>
|
| 26 |
56184
|
k.triantaf
|
</div>
|
| 27 |
|
|
</div>
|
| 28 |
|
|
</li>
|
| 29 |
|
|
</ul>
|
| 30 |
56206
|
k.triantaf
|
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
|
| 31 |
|
|
</div>
|
| 32 |
56184
|
k.triantaf
|
</div>`
|
| 33 |
|
|
})
|
| 34 |
|
|
|
| 35 |
|
|
export class GifSliderComponent {
|
| 36 |
56188
|
k.triantaf
|
@Input() gifs: {"gif": string, "header": string, "text"}[] = [];
|
| 37 |
|
|
@Input() link = false;
|
| 38 |
|
|
@Input() route = null;
|
| 39 |
|
|
@Input() linkTitle = null;
|
| 40 |
56191
|
k.triantaf
|
@Input() gifRight = false;
|
| 41 |
56217
|
k.triantaf
|
@Input() velocity = 0;
|
| 42 |
|
|
@Input() autoplay = true;
|
| 43 |
|
|
@Input() autoplayInterval = 4000;
|
| 44 |
|
|
@Input() pauseOnHover = false;
|
| 45 |
|
|
@Input() center = true;
|
| 46 |
56206
|
k.triantaf
|
|
| 47 |
56184
|
k.triantaf
|
}
|