tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(carousel): implement circular layout and enhance navigation logic

Browse Source
This commit is contained in:
ncoronel
2026-07-23 12:09:21 -03:00
parent fb6ab2fca2
commit a1d5ecb6fa
4 changed files with 211 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/shared/components/carousel/carousel.component.html
View File

@@ -3,17 +3,48 @@
<div
#viewport
class="carousel__viewport"
[class.carousel__viewport--circular]="isCircularLayout()"
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 }"
/>
@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">
<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">
<ng-container
[ngTemplateOutlet]="itemTemplate()"
[ngTemplateOutletContext]="{ $implicit: item, index }"
/>
</div>
}
</div>
}
</div>