Почему моя сова-карусель не загружается после загрузки страницы?

Question

я используюangular 14сngx-owl-carousel-o (version 14), и я добавил компонент, содержащий элемент карусели. Однако, когда я загружаю страницу/products, сначала карусель не грузится, но после наведения мышки на область, где должна быть карусель, или при прокрутке вниз она появляется и работает как задумано.

Вот мойproducts.component.ts:

      import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit{

  dynamicSlides = [
    {
      id: '1',
      src:"../../../assets/img/product-1.png",
      alt:'Side 1',
      title:'Side 1'
    },
    {
      id: '2',
      src:'https://via.placeholder.com/600/771796',
      alt:'Side 2',
      title:'Side 2'
    },
    {
      id: '3',
      src:'https://via.placeholder.com/600/24f355',
      alt:'Side 3',
      title:'Side 3'
    },
    {
      id: '4',
      src:'https://via.placeholder.com/600/d32776',
      alt:'Side 4',
      title:'Side 4'
    },
    {
      id: '5',
      src:'https://via.placeholder.com/600/f66b97',
      alt:'Side 5',
      title:'Side 5'
    }
  ]
        


  constructor() { }
  customOptions: OwlOptions = {
    autoplay: true,
    smartSpeed: 1000,
    margin: 45,
    navSpeed: 600,
    dots: false,
    loop: true,
    
    navText : [
        '<i class="bi bi-arrow-left"></i>',
        '<i class="bi bi-arrow-right"></i>'
    ],
    responsive: {
        0:{
            items:1
        },
        768:{
            items:2
        },
        992:{
            items:3
        },
        1200:{
            items:4
        }
      },

      nav: true
    };

    ngOnInit(): void {}


}

а вот мойproducts.component.html:

      <owl-carousel-o [options]="customOptions">
  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>
</owl-carousel-o>

Какие могут быть причины?