44 lines
1.3 KiB
HTML
44 lines
1.3 KiB
HTML
<section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
|
|
<div class="carousel__frame" [style.width.px]="viewportWidth()">
|
|
<div
|
|
#viewport
|
|
class="carousel__viewport"
|
|
tabindex="0"
|
|
[style.gap.px]="resolvedGap()"
|
|
(scroll)="handleScroll()"
|
|
(keydown)="handleKeydown($event)"
|
|
>
|
|
@for (item of items(); track trackBy()($index, item); let index = $index) {
|
|
<div class="carousel__item">
|
|
<ng-container
|
|
[ngTemplateOutlet]="itemTemplate()"
|
|
[ngTemplateOutletContext]="{ $implicit: item, index }"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (hasMultipleItems()) {
|
|
<button
|
|
type="button"
|
|
class="carousel__control carousel__control--previous"
|
|
[disabled]="!canScrollPrevious()"
|
|
[attr.aria-label]="previousLabel()"
|
|
(click)="previous()"
|
|
>
|
|
<i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="carousel__control carousel__control--next"
|
|
[disabled]="!canScrollNext()"
|
|
[attr.aria-label]="nextLabel()"
|
|
(click)="next()"
|
|
>
|
|
<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
</div>
|
|
</section>
|