Миниатюры ngx-swiper-wrapper не кликабельны

Question

Я ищу слайд-контент как элемент изображения, изображения и видео. для того же ngx-swiper-wrapper удовлетворяет требованиям. Но в то же время я не умею работать с эскизом.

К вашему сведению, вот моя структура.

      public config: SwiperConfigInterface = {
    direction: 'horizontal',
    slidesPerView: 1,
    keyboard: true,
    mousewheel: true,
    scrollbar: false,
    navigation: true,
    pagination: false,
    effect:'slide',
    thumbs: {
      swiper: undefined
    }
  };

  public configThumb: SwiperConfigInterface = {
    direction: 'horizontal',
    slidesPerView: 4,
    keyboard: true,
    mousewheel: true,
    scrollbar: false,
    navigation: true,
    pagination: false,
    effect:'slide',
  };
  @ViewChild('configThumb', {static: false}) galleryThumbs?: SwiperDirective;
  @ViewChild('config', {static: false}) galleryImages?: SwiperDirective;
  

ngAfterViewInit() {
    console.log(this.galleryImages);
    const imagesSwiper = this.galleryImages.swiper();
    const thumbsSwiper = this.galleryThumbs.swiper();
    imagesSwiper.thumbs.swiper = thumbsSwiper;
    imagesSwiper.thumbs.init();
    imagesSwiper.thumbs.update();
    this.cd.detectChanges();
  }

HTML:

      <div fxFlex="50" fxFlex.lt-sm="100" *ngIf="type == 'directive' && show" class="swiper-container" [disabled]="disabled" fxFlex.lt-md="50" class="product-img">
        <div class="swiper-container gallery-top" [swiper]="config">
            <div class="swiper-wrapper">
              <div *ngFor="let image of product?.productMedias" class="swiper-slide">
                <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
                    <picture>
                        <source srcset="{{image?.webpmediaUrl}}" type="image/webp">
                        <source srcset="{{image?.mediaUrl}}" type="image/jpeg">
                        <img src="{{image?.mediaUrl}}" alt="{{image?.altText}}">
                    </picture>
                </div>
              </div>
            </div>
  
            <div class="swiper-scrollbar" [hidden]="config.scrollbar === false"></div>
            <div class="swiper-pagination" [hidden]="config.pagination === false"></div>
  
            <div class="swiper-button-prev" [hidden]="config.navigation === false"></div>
            <div class="swiper-button-next" [hidden]="config.navigation === false"></div>
        </div>
        <div class="swiper-container gallery-thumbs" [swiper]="configThumb">
            <div class="swiper-wrapper">
                <div *ngFor="let image of product?.productMedias" class="swiper-slide" (click)="navigateTo($event, thumbnailIndex)">
                    <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
                        <picture>
                            <source srcset="{{image?.webpmediaUrl}}" type="image/webp">
                            <source srcset="{{image?.mediaUrl}}" type="image/jpeg">
                            <img src="{{image?.mediaUrl}}" alt="{{image?.altText}}">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
        <span *ngIf="!product?.productMedias && storeData">
            <picture>
                <source srcset="{{storeUrl}}content/images/static/{{defprodimageWebp}}" type="image/webp" alt="">
                <source srcset="{{storeUrl}}content/images/static/{{defprodImage}}" type="image/jpeg" alt="">
                <img src="{{storeUrl}}content/images/static/{{defprodImage}}" alt="">
            </picture>
        </span>
    </div>

Сейчас в ngAfterViewInit this.galleryImages; показывает undefined

Эта реализация основана на этой ссылке Git https://github.com/zefoy/ngx-swiper-wrapper/issues/242, комментарий leandroz.

Других примеров я не вижу. Если кто реализовал это, тоже может помочь.