openaire-library/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html

<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm  ">
  <div class="uk-section uk-container  ">
    <div class="uk-width-1-1 uk-margin-medium-bottom">
      <h2 class="uk-margin-remove-top uk-text-center ">
       {{pluginObject.title}}<span class="uk-text-primary">.</span>
      </h2>
    </div>
    <slider-container [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">

      <slider-column type="nav" class="slider-nav">
        <ng-container *ngFor="let card of activeCards; let i = index">
          <ng-container *ngIf="card.show">
            <slider-nav-item [start]="i">
              <div class="uk-text-primary">{{card.tag}}</div>
              <div class="uk-margin-remove uk-text-large uk-text-bold">
                {{card.title}}
              </div>
              <div class="uk-text-small">{{card.description}}</div>
            </slider-nav-item>
          </ng-container>
        </ng-container>
      </slider-column>
      <slider-column type="slider">
        <slider-item type="static">
          <img class="uk-position-center uk-position-z-index" [src]="'https://' + (properties.environment == 'production'?'':'beta.')
          + 'connect.openaire.eu/assets/connect-assets/home/tablet.png'"
               alt="ipad" loading="lazy">
        </slider-item>
        <ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
          <ng-container *ngIf="card.show">
            <slider-item type="slide" [start]="i">
              <img [src]="card.image" [alt]="card.tag" loading="lazy">
            </slider-item>
          </ng-container>
        </ng-container>
      </slider-column>
    </slider-container>
  </div>
</div>