I need to create around 15 carousel in one page, the problem is if i try to create a dynamic carousel with ngFor on owl-carousel-o it is created but when try to resize the page, the cards item disappears, below you can find the code:

<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>

the custom Option:

  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
  }

If i dont use the responsive on custom Option work good, any idea how to solve? Thanks