私はSwiperモバイルタッチスライダー（v。4.0.5）を使用しています。私は、画像がロードされる前にスライダーを初期化することに関連していると思って問題を抱えているため、機能しなくなってしまいます。スワイパーの「imagesReady」イベントが起動しない
私が見つけた唯一の解決策は、遅れてupdate()に電話することです。
setTimeout(function() {
mySwiper.update();
}, 500);
しかし、私は半秒遅れが好きではありません。イメージがロードされた後にスライダを再初期化する必要がある場合は、イメージが準備されるとすぐに効率的にスライダを作成することをお勧めします。
ドキュメントにはupdateOnImagesReadyパラメータが記載されています。このパラメータをtrueに設定すると、すべてのイメージがロードされた後にスライダを再初期化する必要があります。しかし、それは助けに見えません。すべての内部の画像（タグ）がロードされた後に有効にSwiperが再初期化されます
updateOnImagesReady
。 "events"の下
必要preloadImages: true
、ドキュメントがimagesReadyイベントを示しています。私はこのイベントを使ってupdate()に電話すると思った。
imagesReady
イベントは、すべての内部イメージがロードされた直後に起動されます。
updateOnImagesReadyはまた、以下の私のコードで
を有効にする必要があり、initイベントが発生しているようだが、私は火にimagesReadyを取得することはできません。
imagesReadyイベントが起動しないのはなぜですか？
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this doesn't work
}
}
});body {
margin: 0;
}<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>おそらく関連：
Swiper slider not working unless page is resized
Swiper slider space between not showing on load
iDangero Swiper only work when screen is resized
swiper doesn't work on page load
編集：
初期化の問題は、私はeffect:'fade'パラメータを削除する場合は離れて行くように思われます。 slideChangeStart event does not fire when I swipeを参照してください。しかし、私は "フェード"効果を使用したい。そして、私はまだイベントを発射する方法を知りたいです。