75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
|
|
<div class="carousel__frame" [class.carousel__frame--with-controls]="hasMultipleItems()">
|
|
<div
|
|
#viewport
|
|
class="carousel__viewport"
|
|
[class.carousel__viewport--circular]="isCircularLayout()"
|
|
tabindex="0"
|
|
(scroll)="handleScroll()"
|
|
(keydown)="handleKeydown($event)"
|
|
>
|
|
@if (isCircularLayout()) {
|
|
<div
|
|
class="carousel__track"
|
|
[class.carousel__track--previous]="transitionDirection() === -1"
|
|
[class.carousel__track--next]="transitionDirection() === 1"
|
|
[class.carousel__track--moving]="transitionDirection() !== 0"
|
|
(transitionend)="finishCircularTransition($event)"
|
|
(transitioncancel)="finishCircularTransition($event)"
|
|
>
|
|
@for (page of circularPages(); track page.slot) {
|
|
<div
|
|
class="carousel__page"
|
|
[style.gap.px]="resolvedGap()"
|
|
[attr.aria-hidden]="page.slot === 'current' ? null : 'true'"
|
|
[attr.inert]="page.slot === 'current' ? null : ''"
|
|
>
|
|
@for (entry of page.items; track trackBy()(entry.index, entry.item)) {
|
|
<div class="carousel__item" [style.width.px]="itemWidth()">
|
|
<ng-container
|
|
[ngTemplateOutlet]="itemTemplate()"
|
|
[ngTemplateOutletContext]="{ $implicit: entry.item, index: entry.index }"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<div class="carousel__linear-track" [style.gap.px]="resolvedGap()">
|
|
@for (item of items(); track trackBy()($index, item); let index = $index) {
|
|
<div class="carousel__item" [style.width.px]="itemWidth()">
|
|
<ng-container
|
|
[ngTemplateOutlet]="itemTemplate()"
|
|
[ngTemplateOutletContext]="{ $implicit: item, index }"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (hasMultipleItems()) {
|
|
<button
|
|
type="button"
|
|
class="carousel__control carousel__control--previous"
|
|
[disabled]="isPreviousDisabled()"
|
|
[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]="isNextDisabled()"
|
|
[attr.aria-label]="nextLabel()"
|
|
(click)="next()"
|
|
>
|
|
<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
</div>
|
|
</section>
|