dslak_website/src/app/home/home.component.html

<div class="component-home">
  <button class="goto-prev" (click)="scroll('prev')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
  <button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
  <div class="content" #scrollContent (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
    <div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id, item.title)" (mouseover)="paused=true" (mouseout)="paused=false">
        <img class="image" *ngIf="item.loading" src="/assets/images/loader.svg" alt="loading">
        <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
        <div class="text">
          <span class="title">{{item.title}}</span>
          <span class="type" *ngIf="section != 'exhibitions'">{{item.type}}</span>

          <div class="date-container" *ngIf="section == 'exhibitions'">
            <div class="date-row">
              <span class="date-indication" *ngIf="item.date_from != item.date_to">from</span>
              <span class="date-indication" *ngIf="item.date_from == item.date_to">on</span>
              <span class="date">{{item.date_from | date}}</span>
            </div>
            <div class="date-row">
              <span class="date" *ngIf="item.date_from != item.date_to"> <span class="date-indication">to</span> {{item.date_to | date}}</span>
            </div>
          </div>

          <span class="tags">{{item.tags}}</span>
        </div>
      </div>
    </div>
  </div>
</div>

<app-spinner [show]="!loaded"></app-spinner>