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

feat(carousel): adjust item width calculation for better distribution and responsiveness

Browse Source
This commit is contained in:
ncoronel
2026-07-23 13:37:10 -03:00
parent 862751fec8
commit 37bbd65cfe
5 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,5 @@
<section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
<div
class="carousel__frame"
[class.carousel__frame--with-controls]="hasMultipleItems()"
[style.width.px]="frameWidth()"
>
<div class="carousel__frame" [class.carousel__frame--with-controls]="hasMultipleItems()">
<div
#viewport
class="carousel__viewport"
@@ -29,7 +25,7 @@
[attr.inert]="page.slot === 'current' ? null : ''"
>
@for (entry of page.items; track trackBy()(entry.index, entry.item)) {
<div class="carousel__item">
<div class="carousel__item" [style.width.px]="itemWidth()">
<ng-container
[ngTemplateOutlet]="itemTemplate()"
[ngTemplateOutletContext]="{ $implicit: entry.item, index: entry.index }"
@@ -42,7 +38,7 @@
} @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">
<div class="carousel__item" [style.width.px]="itemWidth()">
<ng-container
[ngTemplateOutlet]="itemTemplate()"
[ngTemplateOutletContext]="{ $implicit: item, index }"