0

我希望将内容滑动为图片、图像和视频元素。对于相同的 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;显示未定义

这个实现是基于这个 Git 链接https://github.com/zefoy/ngx-swiper-wrapper/issues/242对leadroz 的评论。

我没有看到它的其他例子。如果有人实现了这一点，也可以提供帮助。

4

0 回答 0