Component: Carousel. When you add an item to the list, container gets wrong estimation for transform css prop

[zenguzikovskij]

Describe the bug

At certain screen widths (e.g. 550px and configuration for 2 items visible) when you populate the item list, which is then passed to the carousel, the .p-carousel-item-container gets wrong value for transform property. Also, user is able to click on the previous item button infinitely.

Environment

Windows 11 Home 23H2

Reproducer

https://stackblitz.com/edit/fp7kfg?file=src%2Fapp%2Fcarousel-circular-demo.ts,src%2Fapp%2Fcarousel-circular-demo.html,src%2Fservice%2Fproductservice.ts

Angular version

17.1.4

PrimeNG version

17.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.2

Browser(s)

Chrome - Version 126.0.6478.56

Steps to reproduce the behavior

1. Go to provided Stackblitz example
2. Wait till view is rendered
3. Press "Clear items" button
4. Press "Add item" button sequentially 3 times 4.1 Observe: HTML element with class .p-carousel-items-container got inline style of transform: translate3d(66.6667%, 0px, 0px);. However, previously percentage of this prop was 0

Expected behavior

When user populates the item list, carousel should silently re-render the list and re-calculate the transform property based on the pointer location (which page was visible when new item arrived). In a way that there is no empty space inside of the carousel and both previous and next buttons do not transform the view if user reaches either start or end of the list.

[Khazii]

+1

[zenguzikovskij]

totalShiftedItems property holds incorrect number when carousel component gets [numVisible]="3" [numScroll]="1" as inputs. When third item is added to the items list, totalShiftedItems is equal to 2 which leads to a shift of 66.6% via translate3d(66.6%, 0, 0)