プロジェクトでイオンスライドを使用しました。コードを以下に示します。
<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>
slideConfig
optionsを使用する前は、スライドは完全に機能してい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 になる可能性があります。これを実現するために、関数を使用しました。しかし、プロジェクトをモードでロードすると、デバイスを回転させると、少し速くスライドします。動的であるため、問題が発生していたことはわかっています。しかし、同時に、スライドを自動再生する必要があります。どうすればこれを達成できますか?3
device
slidesPerView
@HostListener('window: resize')
portrait
autoplay
slidesPerView
slidesPerView