0

プロジェクトでイオンスライドを使用しました。コードを以下に示します。

<ion-grid class="ion-margin-left">
    <ion-slides [options]="slideConfig">
        <ion-slide *ngFor="let item of items">
            <ion-card style="margin-right: 2px">
                <div class="img-container">
                    <img src="/assets/contents/gif_icon/{{item.imgName}}" class="img-style">
                </div>
                <ion-card-content>
                    <p>{{item.title}}</p>
                </ion-card-content>
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-grid>

slideConfigoptionsを使用する前は、スライドは完全に機能していautoplay: trueました。スライド構成オプションのコードを以下に示します。

this.slideConfig = {
   slidesPerView: window.innerWidth / 140,
   autoplay: true
};
  @HostListener('window:resize', ['$event'])
  onResize(event) {

  this.slideConfig = {
    slidesPerView: window.innerWidth / 140,
    autoplay: true
  };
}

この問題は、主に画面を回転させたときに発生します。幅が 120px になるカードを表示しようとしています。そして、回転しても常に120pxになるのはどれですか? カードを回転させる前は正常にスライドしていましたが、回転させた後はカードのスライドが速すぎました。では、どうすればこの問題を解決できますか?

お願いします、1 つ注意してslidesPerViewくださいdynamic。たとえば、portraitモードでslidesPerViewは. 同じデバイスの場合、ユーザーがデバイスを回転させると、 5 になる可能性があります。これを実現するために、関数を使用しました。しかし、プロジェクトをモードでロードすると、デバイスを回転させると、少し速くスライドします。動的であるため、問題が発生していたことはわかっています。しかし、同時に、スライドを自動再生する必要があります。どうすればこれを達成できますか?3deviceslidesPerView@HostListener('window: resize')portraitautoplayslidesPerViewslidesPerView

4

1 に答える 1