<section class="slide">
  <div class="slide-inner">
    <div *ngFor="let slide of slides; let i = index" class="slide-item" [ngClass]="{'active': currentIndex === i}">
      <div id="titulo">
        <h1>{{ slide.TITU }}</h1>
        <button class="banner" (click)="redirect(currentIndex)">
          {{ slide.BTEX }}
        </button>
      </div>
      <img [src]="slide.URLB" alt="{{ slide.TITU }}">
      <!-- <img src="assets/img/base-3.jpg" alt="{{ slide.TITU }}"> -->
    </div>

    <!-- Controles de flechas -->
    <div class="slide-control prev" (click)="prevSlide()">
      <mat-icon style="transform: scale(2);">arrow_back_ios</mat-icon>
    </div>
    <div class="slide-control next" (click)="nextSlide()">
      <mat-icon style="transform: scale(2);">arrow_forward_ios</mat-icon>
    </div>
  </div>
</section>
