<div class="container-slider">
  <div class="item-image" [style.width]="width" [style.height]="height">
    <button mat-mini-fab color="primary" (click)="previousImage()" class="override_no_shadow" matTooltip="Anterior" *ngIf="arrImages.length > 1">
      <mat-icon>chevron_left</mat-icon>
    </button>
    <div *ngFor="let objImagen of arrImages; index as i;"
    class="imagen-slider"
    [style.display]="i == imageSelected ? 'block' : 'none'"
    (click)="openImagen(objImagen.image)">
      <img [src]="objImagen.image" [style.height]="objImagen.height" class="animated fadeIn">
    </div>
    <button mat-mini-fab color="primary" (click)="nextImage()" class="override_no_shadow" matTooltip="Siguiente" *ngIf="arrImages.length > 1">
      <mat-icon>chevron_right</mat-icon>
    </button>
  </div>
  <div *ngIf="arrImages.length > 1">
    <mat-icon *ngFor="let imagen of arrImages; index as i;" (click)="selectedImage(i)" class="selected-image">
      {{ i === imageSelected ? 'radio_button_checked' : 'radio_button_unchecked' }}
    </mat-icon>
  </div>
  <!-- <span *ngIf="arrImages[imageSelected].hasOwnProperty('title')">{{ arrImages[imageSelected].title }}</span> -->
</div>