diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx
index a620a2c11e58..5d421ca6e05f 100644
--- a/packages/main/cypress/specs/Carousel.cy.tsx
+++ b/packages/main/cypress/specs/Carousel.cy.tsx
@@ -389,7 +389,7 @@ describe("Carousel general interaction", () => {
 
 	});
 
-	it.only("navigateTo method and visibleItemsIndices", () => {
+	it("navigateTo method and visibleItemsIndices", () => {
 		cy.mount(
 			<Carousel id="carousel9" itemsPerPage="S2 M2 L2 XL2" arrowsPlacement="Navigation">
 				<Button>Button 1</Button>
@@ -614,4 +614,87 @@ describe("Carousel general interaction", () => {
 			.find(".ui5-carousel-item:nth-child(5)")
 			.should("have.class", "ui5-carousel-item--hidden");
 	});
+
+	it("should render only visible items", () => {
+		cy.mount(
+			<Carousel>
+				<Button />
+				<Button hidden/>
+				<Button />
+			</Carousel>);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.length", 2);
+	});
+
+	it("should update navigation when items become hidden dynamically", () => {
+		cy.mount(
+			<Carousel>
+				<Button />
+				<Button id="btn2" />
+				<Button id="btn3" />
+				<Button id="btn4" />
+			</Carousel>);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.length", 4);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-navigation-dot")
+			.should("have.length", 4);
+
+		cy.get("#btn2").invoke("attr", "hidden", "");
+		cy.get("#btn3").invoke("attr", "hidden", "");
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.length", 2);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-navigation-dot")
+			.should("have.length", 2);
+	});
+
+	it("should handle filtering with multiple items per page", () => {
+		cy.mount(
+			<Carousel itemsPerPage="S2 M2 L2 XL2">
+				<Button />
+				<Button hidden />
+				<Button />
+				<Button hidden />
+				<Button />
+				<Button />
+			</Carousel>);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.length", 4);
+	});
+
+	it("should update page count correctly with filtered content", () => {
+		cy.mount(
+			<Carousel itemsPerPage="S1 M2 L2 XL2">
+				<Button />
+				<Button hidden />
+				<Button />
+				<Button hidden />
+				<Button />
+				<Button />
+			</Carousel>);
+
+		cy.get("ui5-carousel").should("have.prop", "pagesCount", 3);
+
+		cy.get("ui5-carousel")
+			.shadow()
+			.find(".ui5-carousel-navigation-dot")
+			.should("have.length", 3);
+	});
 });
\ No newline at end of file
diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
index 84e0b3a2b994..527faf0e4b4a 100644
--- a/packages/main/src/Carousel.ts
+++ b/packages/main/src/Carousel.ts
@@ -277,6 +277,14 @@ class Carousel extends UI5Element {
 	@property({ type: Boolean, noAttribute: true })
 	_visibleNavigationArrows = false;
 
+	/**
+	 * Internal trigger flag that forces component re-rendering when content items change.
+	 * @private
+	 * @since 2.16.0
+	 */
+	@property({ type: Number, noAttribute: true })
+	_visibleItemsCount = 0;
+
 	/**
 	 * Defines the current slide index, which contains the visible item in the viewport.
 	 * @private
@@ -294,6 +302,8 @@ class Carousel extends UI5Element {
 	_pageStep: number = 10;
 	_visibleItemsIndexes: Array<number>;
 	_itemIndicator: number = 0;
+	_contentItemsObserver: MutationObserver;
+	_observableContent: Array<HTMLElement> = [];
 
 	/**
 	 * Defines the content of the component.
@@ -312,6 +322,20 @@ class Carousel extends UI5Element {
 	constructor() {
 		super();
 
+		this._contentItemsObserver = new MutationObserver(() => {
+			const visibleItemsCount = this._visibleItems.length;
+
+			if (this._visibleItemsCount === visibleItemsCount) {
+				return;
+			}
+
+			this._visibleItemsCount = visibleItemsCount;
+
+			this._currentSlideIndex = clamp(this._currentSlideIndex, 0, Math.max(0, this.items.length - this.effectiveItemsPerPage));
+			this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentSlideIndex, this.items.length - 1);
+			this._moveToItem(this._currentSlideIndex);
+		});
+
 		this._scrollEnablement = new ScrollEnablement(this);
 		this._scrollEnablement.attachEvent("touchend", e => {
 			this._updateScrolling(e);
@@ -325,6 +349,8 @@ class Carousel extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		this._observeContentItems();
+
 		if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation || !isDesktop()) {
 			this._visibleNavigationArrows = true;
 		}
@@ -345,6 +371,8 @@ class Carousel extends UI5Element {
 	}
 
 	onExitDOM() {
+		this._contentItemsObserver.disconnect();
+		this._observableContent = [];
 		ResizeHandler.deregister(this, this._onResizeBound);
 	}
 
@@ -421,8 +449,8 @@ class Carousel extends UI5Element {
 		}
 
 		let pageIndex = -1;
-		for (let i = 0; i < this.content.length; i++) {
-			if (this.content[i].isEqualNode(target?.querySelector("slot")?.assignedNodes()[0] as HTMLElement)) {
+		for (let i = 0; i < this._visibleItems.length; i++) {
+			if (this._visibleItems[i].isEqualNode(target?.querySelector("slot")?.assignedNodes()[0] as HTMLElement)) {
 				pageIndex = i;
 				break;
 			}
@@ -484,6 +512,34 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_observeContentItems() {
+		if (this.hasMatchingContent) {
+			return;
+		}
+
+		this.content.forEach(item => {
+			if (!this._observableContent.includes(item)) {
+				this._contentItemsObserver.observe(item, {
+					characterData: false,
+					childList: false,
+					subtree: false,
+					attributes: true,
+					attributeFilter: ["hidden"],
+				});
+			}
+		});
+		this._observableContent = this.content;
+	}
+
+	get hasMatchingContent() {
+		if (this._observableContent.length !== this.content.length) {
+			return false;
+		}
+
+		const observableContentSet = new WeakSet(this._observableContent);
+		return this.content.every(item => observableContentSet.has(item));
+	}
+
 	_handleHome(e: KeyboardEvent) {
 		e.preventDefault();
 		this.navigateTo(0);
@@ -670,6 +726,10 @@ class Carousel extends UI5Element {
 	 * @public
 	 */
 	navigateTo(itemIndex: number) {
+		if (!this.isIndexInRange(itemIndex)) {
+			return;
+		}
+
 		if (this._focusedItemIndex < itemIndex) {
 			this._itemIndicator = 1;
 		}
@@ -712,13 +772,13 @@ class Carousel extends UI5Element {
 	 * @private
 	 */
 	get items(): Array<ItemsInfo> {
-		return this.content.map((item, idx) => {
+		return this._visibleItems.map((item, idx) => {
 			return {
 				id: `${this._id}-carousel-item-${idx + 1}`,
 				item,
 				tabIndex: this.isItemInViewport(this._focusedItemIndex) ? 0 : -1,
 				posinset: idx + 1,
-				setsize: this.content.length,
+				setsize: this._visibleItems.length,
 				visible: this.isItemInViewport(idx),
 			};
 		});
@@ -835,7 +895,7 @@ class Carousel extends UI5Element {
 	}
 
 	get pagesCount() {
-		const items = this.content.length;
+		const items = this._visibleItems.length;
 		return items > this.effectiveItemsPerPage ? items - this.effectiveItemsPerPage + 1 : 1;
 	}
 	get isPageTypeDots() {
@@ -873,7 +933,7 @@ class Carousel extends UI5Element {
 	}
 
 	get hasNext() {
-		return this.cyclic || (this._focusedItemIndex + 1 <= this.content.length - 1 && this._currentSlideIndex < this.pagesCount - 1);
+		return this.cyclic || (this._focusedItemIndex + 1 <= this._visibleItems.length - 1 && this._currentSlideIndex < this.pagesCount - 1);
 	}
 
 	get suppressAnimation() {
@@ -892,10 +952,6 @@ class Carousel extends UI5Element {
 		return Carousel.i18nBundle.getText(CAROUSEL_OF_TEXT);
 	}
 
-	get ariaActiveDescendant() {
-		return this.content.length ? `${this._id}-carousel-item-${this._focusedItemIndex + 1}` : undefined;
-	}
-
 	get ariaLabelTxt() {
 		return getEffectiveAriaLabelText(this);
 	}
@@ -912,6 +968,16 @@ class Carousel extends UI5Element {
 		return Carousel.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION);
 	}
 
+	/**
+ 	 * Returns only visible (non-hidden) content items.
+	 * Items with the 'hidden' attribute are automatically excluded from carousel navigation.
+	 * @private
+	 * @returns {Array<HTMLElement>}
+	 */
+	get _visibleItems() {
+		return this.content.filter(x => !x.hasAttribute("hidden"));
+	}
+
 	carouselItemDomRef(idx: number) : Array<HTMLElement> {
 		const items = this.getDomRef()?.querySelectorAll(".ui5-carousel-item") || [];
 		return Array.from(items).filter((item, index) => {
diff --git a/packages/main/test/pages/Carousel.html b/packages/main/test/pages/Carousel.html
index 04a9690082f7..5bb9f8d44f87 100644
--- a/packages/main/test/pages/Carousel.html
+++ b/packages/main/test/pages/Carousel.html
@@ -792,6 +792,124 @@ <h4 id="manyButtons">Many Buttons Carousel</h4>
 		</ui5-card>
 	</ui5-carousel>
 
+	<h3> Testing hidden items </h3>
+	<ui5-carousel items-per-page="S1 M2 L3 XL3" background-design="Solid" page-indicator-background-design="Transparent"
+		page-indicator-border-design="None">
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="Item 1" title-text="Visible Card 1"
+				subtitle-text="This card is visible">
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
+				<ui5-li icon="opportunity">Sales Performance</ui5-li>
+				<ui5-li icon="line-charts">Quarterly Reports</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard" hidden>
+			<ui5-card-header slot="header" status="Item 2" title-text="Hidden Card 2"
+				subtitle-text="This card is hidden via attribute">
+				<ui5-icon name="hide" slot="avatar"></ui5-icon>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="cancel">Hidden Analytics</ui5-li>
+				<ui5-li icon="delete">Hidden Data Cleanup</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="Item 3" title-text="Visible Card 3"
+				subtitle-text="Visible card after hidden one">
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Customer Insights</ui5-li>
+				<ui5-li icon="opportunity">Campaign Performance</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="Item 4" title-text="Visible Card 4"
+				subtitle-text="Visible item example">
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="line-charts">Trend Analysis</ui5-li>
+				<ui5-li icon="customer">Customer Segments</ui5-li>
+				<ui5-li icon="workflow-tasks">Action Items</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard" hidden>
+			<ui5-card-header slot="header" status="Item 5" title-text="Hidden Card 5"
+				subtitle-text="Another hidden example">
+				<ui5-icon name="hide" slot="avatar"></ui5-icon>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="cancel">Hidden Task</ui5-li>
+				<ui5-li icon="delete">Hidden Entry</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="Item 6" title-text="Visible Card 6"
+				subtitle-text="End of visible sequence">
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Final Overview</ui5-li>
+				<ui5-li icon="opportunity">Closing Metrics</ui5-li>
+			</ui5-list>
+		</ui5-card>
+	</ui5-carousel>
+
+	<ui5-button id="hideLastCarouselBtn" design="Negative">Hide Last Item</ui5-button>
+	<ui5-button id="addItem" >Аdd Item</ui5-button>
+	
+	<ui5-carousel id="lastCarousel" arrows-placement="Navigation" page-indicator-type="Numeric">
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="1 of 4" title-text="Visible Card 1"
+				subtitle-text="This card is visible" interactive>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
+				<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+				<ui5-li icon="line-charts">Marketing Plans</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard" hidden>
+			<ui5-card-header slot="header" status="2 of 4" title-text="Visible Card 2"
+				subtitle-text="This card is visible" interactive>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
+				<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+				<ui5-li icon="line-charts">Marketing Plans</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="3 of 4" title-text="Visible Card 3"
+				subtitle-text="This card is visible" interactive>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
+				<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+				<ui5-li icon="line-charts">Marketing Plans</ui5-li>
+			</ui5-list>
+		</ui5-card>
+
+		<ui5-card class="myCard">
+			<ui5-card-header slot="header" status="4 of 4" title-text="Visible Card 4"
+				subtitle-text="This card is visible" interactive>
+			</ui5-card-header>
+			<ui5-list separators="Inner">
+				<ui5-li icon="horizontal-bullet-chart">Marketing Overview</ui5-li>
+				<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+				<ui5-li icon="line-charts">Marketing Plans</ui5-li>
+			</ui5-list>
+		</ui5-card>
+	</ui5-carousel>
+
 </body>
 
 <script>
@@ -807,6 +925,36 @@ <h4 id="manyButtons">Many Buttons Carousel</h4>
 		visibleItems.value = carousel9.visibleItemsIndices;
 	});
 
+	var hideLastCarouselBtn = document.getElementById("hideLastCarouselBtn");
+	var lastCarousel = document.getElementById("lastCarousel");
+
+	hideLastCarouselBtn.addEventListener("click", function() {
+		var cards = lastCarousel.querySelectorAll("ui5-card");
+		var lastCard = cards[cards.length - 1]; 
+		
+		if (lastCard.hasAttribute("hidden")) {
+			lastCard.removeAttribute("hidden");
+			hideLastCarouselBtn.textContent = "Hide Item";
+		} else {
+			lastCard.setAttribute("hidden", "");
+			hideLastCarouselBtn.textContent = "Show Item";
+		}
+	});
+
+	var addItemBtn = document.getElementById("addItem");
+	addItemBtn.addEventListener("click", function() {
+		var newCard = document.createElement("ui5-card");
+		newCard.className = "myCard";
+		var header = document.createElement("ui5-card-header");
+		header.setAttribute("slot", "header");
+		header.setAttribute("status", (lastCarousel.content.length + 1) + " of 5");
+		header.setAttribute("title-text", "New Card " + (lastCarousel.content.length + 1));
+		header.setAttribute("subtitle-text", "This is a new card");
+		header.setAttribute("interactive", "");
+		newCard.appendChild(header);	
+		lastCarousel.appendChild(newCard);
+	});
+
 </script>
 
 </html>
\ No newline at end of file