carousel is not rendering properly in angular 16

[ritikRidingad]

summary

carousel is not rendering properly in angular 16.2 and it is rendering first time and after refreshing the page it breaks itself in production mode. it is working properly fine in localhost:4200 .

package version

"ngx-owl-carousel-o": "^16.0.0",

my code configuration

	customOptions: OwlOptions = {
		loop: true,
		mouseDrag: true,
		touchDrag: true,
		pullDrag: true,
		dots: false,
		autoplay: true,
		navSpeed: 50,
		navText: ['', ''],
		responsive: {
			0: {
				items: 1
			},
			400: {
				items: 1
			},
			740: {
				items: 1
			},
			940: {
				items: 1
			}
		},
		nav: false,
		autoplayTimeout: 1500
	}

<owl-carousel-o [options]="customOptions">
				<ng-container *ngFor="let image of imageData">
					<ng-template carouselSlide>
						<img [src]="image?.img" class="object-contain w-full h-[450px] max-sm:p-1" 
                                                 [alt]="image?.img" />
					</ng-template>  
				</ng-container>
 </owl-carousel-o>

images

Image 1

Image 2

please help me how can i fix it ?

[ritikRidingad]

@shiv-source

[BartolomeoItaliano]

I experience similar issue.

[BartolomeoItaliano]

This is the only way I found to solve the issue.
I shared it on stack overflow:

https://stackoverflow.com/questions/58050522/refresh-owl-carousel-in-angular/78538867#78538867