小画面のときの画像3枚と大画面のときの画像3枚をjQueryで入れ替えました。しかし入れ替えた3枚の画像をSwiperでフェードイン・フェードアウトさせようとしても上手く表示されません。

Swiper（バージョンは5.3.1）を使ってフェードイン、フェードアウトで自動で画像を切り替えようとしています。

ただし、画像は1種類のみを使うのではなく、小画面のときと大画面のときとで使う画像を分けます。

小画面のときに使う画像は
top-image-1.png
top-image-2.png
top-image-3.png
の3つであり、この3つをSwiperでフェードイン・フェードアウトさせます。

これに対して大画面のときは
top-image-4.png
top-image-5.png
top-image-6.png
の3つをフェードイン・フェードアウトさせます。

小画面のときと大画面のときの画像の切り替えは、jQueryで行います。

これをふまえて次のようなコードを書きました。

HTML
1<div class="swiper-container">
2    <div class="swiper-wrapper">
3        <figure class="swiper-slide"><img id="swiper-img-1" src="img/sp/top-image-1.png" alt=""></figure>
4        <figure class="swiper-slide"><img id="swiper-img-2" src="img/sp/top-image-2.png" alt=""></figure>
5        <figure class="swiper-slide"><img id="swiper-img-3" src="img/sp/top-image-3.png" alt=""></figure>
6    </div>
7</div>

CSS
1body, figure {
2  margin: 0;
3}

jQuery
1// 大画面と小画面の画像の切り替え
2$(function () {
3
4    $(window).on('load resize', function () {
5
6        var w = $(window).width();
7        var x = 768; 
8        if (w < x) {
9
10            $('#swiper-img-1').attr("src", "img/sp/top-image-1.png");
11            $('#swiper-img-2').attr("src", "img/sp/top-image-2.png");
12            $('#swiper-img-3').attr("src", "img/sp/top-image-3.png");
13            
14        } else {
15
16            $('#swiper-img-1').attr("src", "img/pc/top-image-4.png");
17            $('#swiper-img-2').attr("src", "img/pc/top-image-5.png");
18            $('#swiper-img-3').attr("src", "img/pc/top-image-6.png");
19            
20        }
21    });
22
23})

JavaScript
1// Swiperによるフェードイン・フェードアウト
2let mySwiper = new Swiper('.swiper-container', {
3
4    loop: true,
5    effect: 'fade',
6    speed: 3000,
7    autoplay: {
8        delay: 3000
9    }
10
11});

しかしこのコードを作動させてみると、小画面のときは問題なく作動するのですが、大画面のときにきちんと作動しません。

画像の切り替え自体は行われるのですが、適切な順で切り替わってくれないのです。

本来であれば、
top-image-4.png
top-image-5.png
top-image-6.png
の順に切り替わらなければならないのですが、大画面の画像に混じって小画面の画像も表示されてしまいます。

そこでSwiperの自動ループを止め、ディベロッパーツールで大画面時の画像の配置を確認したところ、画像は上から順に
top-image-6.png
top-image-4.png
top-image-5.png
top-image-3.png
top-image-1.png
となり、小画面時に表示される画像も配置されていました。

なんとか適切に画像を切り替えたいのですが、どのように修正すればいいのでしょうか？
よろしくお願いします。