diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx
index 771193c1035e..6fc27260bbf9 100644
--- a/packages/main/cypress/specs/Carousel.cy.tsx
+++ b/packages/main/cypress/specs/Carousel.cy.tsx
@@ -800,6 +800,41 @@ describe("Carousel general interaction", () => {
 			});
 	});
 
+	it("_resizing remains false when navigateTo is called after _onResize", () => {
+		cy.mount(
+			<Carousel id="carousel"
+			          style="height: 300px;"
+			          items-per-page="S3 M3 L3 XL3"
+			          arrowsPlacement="Navigation">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+				<Button>Button 4</Button>
+				<Button>Button 5</Button>
+				<Button>Button 6</Button>
+			</Carousel>
+		);
+
+		cy.get<Carousel>("#carousel")
+			.then($carousel => {
+				const carousel = $carousel[0];
+				carousel.style.width = "99%";
+				expect(carousel._resizing).to.be.false;
+
+				return new Cypress.Promise(resolve => {
+					requestAnimationFrame(() => {
+						carousel.style.width = "98%";
+						expect(carousel._resizing).to.be.false;
+
+						setTimeout(() => {
+							expect(carousel._resizing).to.be.false;
+							resolve();
+						}, 200);
+					});
+				});
+			});
+	});
+
 	it("items should remain reachable after resizing increases items per page", () => {
 		const navigateStub = cy.stub().as("navigateStub");
 
diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
index 911d123b4985..261cba06d25a 100644
--- a/packages/main/src/Carousel.ts
+++ b/packages/main/src/Carousel.ts
@@ -401,6 +401,8 @@ class Carousel extends UI5Element {
 		const previousItemsPerPage = this.effectiveItemsPerPage;
 
 		// Set the resizing flag to suppress animation while resizing
+		const previousWidth = this._width;
+
 		this._resizing = true;
 
 		// Change transitively effectiveItemsPerPage by modifying _width
@@ -409,7 +411,8 @@ class Carousel extends UI5Element {
 
 		// Items per page did not change,
 		// therefore page index does not need to be re-adjusted
-		if (this.effectiveItemsPerPage === previousItemsPerPage) {
+		if (this._width === previousWidth && this.effectiveItemsPerPage === previousItemsPerPage) {
+			this._resizing = false;
 			this._updateVisibleItems(this._currentPageIndex);
 			return;
 		}
diff --git a/packages/main/test/pages/CarouselPublicMethods.html b/packages/main/test/pages/CarouselPublicMethods.html
index 51f79e73c508..b2a20a7f4df7 100644
--- a/packages/main/test/pages/CarouselPublicMethods.html
+++ b/packages/main/test/pages/CarouselPublicMethods.html
@@ -15,7 +15,9 @@
 		<ui5-button id="navigateLeft" icon="slim-arrow-left"></ui5-button>
 		<ui5-button id="navigateRight" icon="slim-arrow-right"></ui5-button>
 	</div>
-	<ui5-carousel id="carouselCards" items-per-page="S3 M3 L3 XL3" cyclic>
+	<ui5-carousel id="carouselCards"
+				  arrows-placement="Navigation"
+				  items-per-page="S3 M3 L3 XL3" cyclic>
 		<ui5-card id="card" class="myCard">
 			<ui5-card-header slot="header" status="1 of 23" title-text="1" subtitle-text="quick links"
 				interactive>
@@ -238,14 +240,16 @@
 				<ui5-li icon="learning-assistant">Tutorials</ui5-li>
 			</ui5-list>
 		</ui5-card>
-
 	</ui5-carousel>
+	<br>
+	<ui5-button id="btnNavigate">Check animation after resize - navigate to 5</ui5-button>
 </body>
 
 <script>
 	const navigateLeftBtn = document.getElementById("navigateLeft");
 	const navigateRightBtn = document.getElementById("navigateRight");
 	const carousel = document.getElementById("carouselCards");
+	const btnNavigate = document.getElementById("btnNavigate");
 
 	navigateLeftBtn.addEventListener("click", function() {
 		const newPageIndex = carousel.visibleItemsIndices[0] - 1;
@@ -256,6 +260,11 @@
 		const newPageIndex = carousel.visibleItemsIndices[0] + 1;
 		carousel.navigateTo(newPageIndex);
 	});
+
+	btnNavigate.addEventListener("click", function() {
+		carousel.style.width = "90%";
+		carousel.navigateTo(5);
+	});
 </script>
 
 </html>
\ No newline at end of file