Component: Carousel | Circular Option is broken when first iteration is done

[EnricoMessall]

Describe the bug

When first circular iteration is done, the component moves back all the way to the second element see:
https://www.youtube.com/watch?v=9YeLum9tyn0

Looking into some console loggings, it is looking for me that the value at position 7 to -3 (totalShiftedItems) is being wrongly overwritten by the second logging at position 4 to -1 (totalShiftedItems).

The second logging in this case is the ngAfterContentChecked function.

Environment

Reproducer

https://primeng.org/carousel

Angular version

16.2.3

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.5.1

Browser(s)

Chrome, Safari

Steps to reproduce the behavior

No response

Expected behavior

No response

[EnricoMessall]

Problem is part of the totalShiftedItems.

It lays in onTransitionEnd where the first element is getting a translate3d of 100 after first of all having one of 1100 after some milliseconds. If the carousel isn't waiting for that, this effect happens.

[EnricoMessall]

Results from ngAfterContentChecked this line. When using normal stepping by hand this line resets totalShiftedItems to its correct value before calling onTransitionEnd. With autoplayInterval or too fast clicking ngAfterContentChecked happens after onTransitionEnd and results in having the wrong translate3d value

[notetosiraj]

modified totalShiftedItems condition seems issue may fixed .

`
//carousel.ts

step(dir: number, page?: number) {

// code removed here due to brevity

if (isCircular && this.page === this.totalDots() - 1 && dir === -1)
{
totalShiftedItems = -1 * this._numVisible; // modified line
page = 0;
}

}
`