How to make PrimeNG Carousel responsive based on container width instead of window width?

I'm using the PrimeNG Carousel component in my Angular application. I've configured the responsiveOptions to adjust the number of visible items based on screen size. However, I've noticed that the breakpoints are based on the window's width, not the width of the carousel's container.

This becomes problematic when the carousel is nested within a container that doesn't span the full width of the window. In such cases, the responsiveness doesn't behave as expected.

I've searched through the documentation and various forums but haven't found a solution to make the carousel responsive based on its container's width.

ngAfterViewInit(): void {
this.resizeObserver = new ResizeObserver(() => {
this.updateVisibleItems();
});

this.resizeObserver.observe(this.carousel.el.nativeElement);
}

private updateVisibleItems(): void {
if (!this.items || !this.carousel) return;

const numVisible = this.carousel.numVisible || this.numVisible;
this.visibleItems = this.getDisplayItems(this.items, numVisible);
this.cdr.markForCheck();
}


Is there a way to configure PrimeNG Carousel to respond to the width of its container rather than the window? If not, are there any recommended workarounds or custom implementations to achieve this behavior?

Continue reading...