45 lines
1.5 KiB
HTML
45 lines
1.5 KiB
HTML
<section
|
|
class="main-carousel"
|
|
role="region"
|
|
aria-roledescription="carrusel"
|
|
[attr.aria-label]="ariaLabel()"
|
|
tabindex="0"
|
|
(mouseenter)="setPaused(true)"
|
|
(mouseleave)="setPaused(false)"
|
|
(focusin)="setPaused(true)"
|
|
(focusout)="setPaused(false)"
|
|
(keydown)="handleKeydown($event)"
|
|
>
|
|
<div class="main-carousel__viewport" aria-live="off">
|
|
@for (image of images(); track $index; let index = $index) {
|
|
<img
|
|
class="main-carousel__image"
|
|
[class.main-carousel__image--active]="index === activeIndex()"
|
|
[attr.src]="imageSource(image, index)"
|
|
[alt]="imageAlt(index)"
|
|
[attr.aria-hidden]="index === activeIndex() ? null : 'true'"
|
|
loading="eager"
|
|
[attr.fetchpriority]="index === activeIndex() ? 'high' : 'low'"
|
|
draggable="false"
|
|
(load)="handleImageLoad(index)"
|
|
(error)="handleImageError(index)"
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
@if (hasMultipleImages()) {
|
|
<div class="main-carousel__indicators" role="group" aria-label="Seleccionar imagen">
|
|
@for (image of images(); track $index; let index = $index) {
|
|
<button
|
|
type="button"
|
|
class="main-carousel__indicator"
|
|
[class.main-carousel__indicator--active]="index === activeIndex()"
|
|
[attr.aria-label]="'Mostrar imagen ' + (index + 1)"
|
|
[attr.aria-current]="index === activeIndex() ? 'true' : null"
|
|
(click)="selectImage(index)"
|
|
></button>
|
|
}
|
|
</div>
|
|
}
|
|
</section>
|