Carousel Component Error with dynamic image List

Hi , I'm using the pro carousel component , and i have a specific need to make the list of the viewable images dynamic:

suppose we have a product page with an image carousel , when the page is opened i only have 5 image but the product has lets say more than 10 colors and textures , and the user can select them from an option list , putting more than 10 images in the thumbnail carousel makes it ugly so i managed to put initial 5 images only and add the desired image dynamically but always in the images list i only have 6 images at most .it works but sometimes i see this error :

TypeError: Cannot set property 'directionNext' of undefined at CarouselComponent.fadeAnimation (ng-uikit-pro-standard.js:3067)the sliding is implemented manually :

<div class="container">
  <div class="row">
    <div class="col-8 d-flex justify-content-center">
      <mdb-carousel *ngIf="resourceList.length > 0" #imagesCarousel [isControls]="true"
                    [class]="'carousel-fade'"
                    [type]="'carousel-thumbnails'"
                    (activeSlideChange)="onActiveSlideChange($event)"
                    [animation]="'fade'">
        <!--First slide-->
        <mdb-carousel-item *ngFor="let resourceItem of resourceList" class="p-1">


            <div class="row align-items-center">
              <div class="col d-flex justify-content-center">
                <figure>
                  <img width="470" class="img-fluid rounded" [src]="resourceItem.url">
                </figure>
              </div>
            </div>

        </mdb-carousel-item>

      </mdb-carousel>
    </div>
    <div class="col-4">
      <div  [class]="
                    'm-1 p-2 border rounded border-secondary'">
        <a *ngFor="let otherResourceItem of otherResourceList; let i=index;" (click)="addImage(otherResourceItem.id)">
          <img [src]="otherResourceItem.url"
               [class]="'img-thumbnail border-warning'"
               [style]="'width: 50px'">
        </a>
      </div>

    </div>
  </div>
</div>




import {Component, OnInit, ViewChild} from '@angular/core';
import {CarouselComponent} from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('imagesCarousel', {static: false}) imagesCarousel: CarouselComponent;

  title = 'ng-uikit-pro-standard';

  resourceList: Array<ResourceItem> = [
    {id: 1, url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg?'},
    // tslint:disable-next-line:max-line-length
    {
      id: 2,
      url: 'https://www.spain.info/export/sites/segtur/.content/imagenes/destacados-homes-cuadrados/mirador-galiana-ucero-soria-c-alberto-frias-u1195950.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {
      id: 3,
      url: 'https://www.visitcentroamerica.com/wp-content/uploads/2017/08/central-america-native-protected-spaces-nature-reserves-park-national-volcanoes-salvador-800x800.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {id: 4, url: 'https://pteproductions.com/wp-content/uploads/2017/02/landscape14-800x800.jpg'},
    {id: 5, url: 'https://spfcanyon.com/images/uploads/_ansel_image_cache/3c957ac47ff881b2b1027d054d67d806.jpg'}];


  otherResourceList: Array<ResourceItem> = [
    {id: 6, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKVbtH4hJQLGYG_6mfVHABen7ITmZwMMbSUA&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {
      id: 7,
      url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_30/natural_wonder.jpg?quality=89&w=800'
    },
    // tslint:disable-next-line:max-line-length
    {id: 8, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrUNEl9KJwRd3UrAdFwAaR1-sB6ahZVeniEg&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {id: 9, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFDYsIxNvFpFUmUW-uPlAwXwNaAT5BHulqQQ&usqp=CAU'},
    {id: 10, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSouUzXWhv1-tleZv1oFyHx9xuO_zxmpD6sVw&usqp=CAU'}];

  constructor() {
  }

  ngOnInit() {

  }

  onActiveSlideChange($event) {
  }
  addImage(i: number) {
    console.log('adding image with id ' + i);
    if (this.resourceList.length > 5) {
      this.resourceList = this.resourceList.filter(res => res.id <= 5);
    }
    this.resourceList.push(this.otherResourceList.find(or => or.id === i));
    this.imagesCarousel.selectSlide(i-1);


  }
}
export class ResourceItem {
  id: number;
  url: string;
}

and the carousel freezes , unable to click on thumbnails or slide or wathever .is the carousel component usable with dynamic image list ? do i need to reset the carousel component when adding a new image entry by calling some method ?

Thank you.