Necesito crear alrededor de 15 carruseles en una página, el problema es que si trato de crear un carrusel dinámico con ngFor en owl-carousel-o se crea pero cuando intento cambiar el tamaño de la página, el elemento de las tarjetas desaparece, a continuación puede encontrar el código:

 <ng-container *ngFor="let item of demoDataCatVideo; let i = index"> <div class="content-carousel"> <h2>{{item.category.label}}</h2> <owl-carousel-o [options]="customOptions"> <ng-container *ngFor="let card of item.children | slice:0:15"> <ng-template carouselSlide [id]="card.id"> <div class="single-item"> <div class="box-img"> <img [src]="card.thumbnail" alt=""/> </div> <div class="box-meeting-info"> <div class="box-article"> <p class="name-product">{{card.name}}</p> </div> <div class="date-start"> <p>{{card.startDate | date:'dd-MM-yyyy H:mm:ss'}}</p> </div> </div> </div> </ng-template> </ng-container> </owl-carousel-o> </div> </ng-container>

la opción personalizada:

 customOptions: OwlOptions = { loop: false, mouseDrag: true, touchDrag: true, pullDrag: false, dots: false, navSpeed: 700, navText: ["",""], responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 4 } }, nav: true }

Si no uso la respuesta en la opción personalizada funciona bien, ¿alguna idea de cómo resolverlo? Gracias