zooming the page will reset the carousel - carousel

Question

Is there a way to avoid reset the carousel after the user zoom in/out the browser page?
I found pages with similar carousel and this behaviour doesn't happens.
Go to spartacus demo website https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/, in the carousel navigate to the next block of slide, then zooming the page, you should see the carousel reset to the first block of slides.

Answer 1

This behaviour of the CarouselComponent is expected. Its service depends on window.resize event to adjust the number of items on carousel page whenever the window got resized.
If you consider it as a bug, please create an issue in the Spartacus GitHub repository. Team will take your proposal into consideration.

Answer 2

There is one way this can be handled.
In DOM, instead of using Spartacus's activeSlide variable for rendering the UI, use one tempVariable named say tempActiveSlide
Reassign the tempActiveSlide only if the items per slide are changing. This count will change whenever the window resizes and which is as per the functionality of CarouselService.
Ref - https://sap.github.io/spartacus/injectables/CarouselService.html#source
This way, the carousel on UI will only reset if the number of items per slide have changed. Otherwise it wont reset.
TS code:
tempActiveSlide;
itemsPerSlide = 0;
ngOnInit(): void {
super.ngOnInit();
this.tempActiveSlide = this.activeSlide;
this.size$.subscribe((items) => {
if (items !== this.itemsPerSlide) {
this.itemsPerSlide = items;
this.tempActiveSlide = this.activeSlide;
}
});
}