ngx-Swiper未正确捕捉

Question

我正在尝试将ngx-swiper-wrapper集成到一个angular/ionic项目中。然而，“幻灯片”似乎不能正确地折断。一张幻灯片应该同时显示，但会出现某种无限滚动，幻灯片在屏幕外开始，在屏幕外结束，没有幻灯片捕捉到视口。

使用的代码如下；

<swiper class="swiper-container" fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
  <div class="swiper-slide">
      Slide 1
  </div>
  <div class="swiper-slide">
      Slide 2
  </div>
</swiper>

在组件中包含以下内容；

public config: SwiperConfigInterface = {
      direction: 'horizontal',
      loop: true,
      slidesPerView: 1,
      keyboard: true,
      mousewheel: true,
      scrollbar: false,
      navigation: true,
      pagination: true
  };

Answer 1

有几件事，你可以使用swiper的官方npm包来代替ngx-swiper-wrapper，它已经支持Angular Swiper Angular了。不再需要使用包装器，而且它的最新更新是1 year+

无论采用哪种方法，您都可以通过执行以下操作来解决此问题：

​

  ngAfterContentChecked(): void {
    if (this.swiper) {
      this.swiper.update();
    }
  }

  onSwiper(swiperRef: any) {
    this.swiper = swiperRef;
  }

<swiper class="swiper-container" fxFlex="auto" [config]="config" (swiper)="onSwiper($event)" (indexChange)="onIndexChange($event)">
  <div class="swiper-slide">
      Slide 1
  </div>
  <div class="swiper-slide">
      Slide 2
  </div>
</swiper>

​

本文基于MadMac & R4yY https://stackoverflow.com/a/68779564/2276364的回答