swiper.js parallaxの動きを最初のスライドでも実現したいです

前提・実現したいこと

現在、swiper.jsを利用して
背景が画像で、上に説明文等のパーツが乗るメインビジュアルを実装しています。

そして、
data-swiper-parallax
を利用して、画像が切り替わる際にタイトルや説明文等のパーツを別々に動かしています。

ただそのパーツの動きはスライドが切り替わる際のみで、
一番最初にページを読み込んだ時には動き無く表示されているのみになります。

こちら、ページ読み込み表示毎に一枚目のスライドのパーツも
同じようにパララックスの動きをつけるにはどのようにすればよいでしょうか？

ご教授いただけれたらと思います。
どうぞよろしくお願いいたします。

該当のソースコード

html
1
2      <div class="swiper-container ">
3        <!-- Additional required wrapper -->
4        <div class="swiper-wrapper">
5          <div class="swiper-slide" style="background-image: url('/images/index/img01.jpg');">
6            <div class="mv-title  " data-swiper-parallax="-100">
7              <h3>スライドタイトル１</h3>
8            </div>
9            <div class="mv-info ">
10              <div class="mv-info-inner " data-swiper-parallax-y="-20%">
11                <p>スライド１説明文が入ります</p>
12                <div class="btn01"><a href="#">詳細を見る</a></div>
13              </div>
14            </div>
15          </div>
16 　　　　<div class="swiper-slide" style="background-image: url('/images/index/img02.jpg');">
17          <div class="mv-title  " data-swiper-parallax="-100">
18             <h3>スライドタイトル２</h3>
19            </div>
20          <div class="mv-info ">
21          <div class="mv-info-inner "  data-swiper-parallax-y="-20%">
22                <p>説明テキスト２説明テキスト２説明テキスト２説明テキスト２説明テキスト２</p>
23              <div class="btn01"><a href="#">詳細を見る</a></div>
24              </div>
25            </>
26          </div>
27 　　　　<div class="swiper-slide" style="background-image: url('/images/index/img03.jpg');">
28          <div class="mv-title  " data-swiper-parallax="-100">
29             <h3>スライドタイトル３</h3>
30            </div>
31            <div class="mv-info ">
32            <div class="mv-info-inner "  data-swiper-parallax-y="-20%">
33                <p>説明テキスト３説明テキスト３説明テキスト３説明テキスト３説明テキスト３</p>
34             <div class="btn01"><a href="#">詳細を見る</a></div>
35              </div>
36            </div>
37          </div>
38        </div>
39
40        <!-- pagination -->
41        <div class="swiper-pagination swiper-pagination-white"></div>
42        <!-- navigation buttons -->
43        <div class="swiper-button-prev swiper-button-white"></div>
44        <div class="swiper-button-next swiper-button-white"></div>
45      </div>

JavaScript
1jQuery(function ($) {
2  if (document.querySelector(".swiper-container")) {
3    var mySwiper = new Swiper(".swiper-container", {
4      loop: true, //ループさせる
5      parallax: true,
6      loadOnTransitionStart: true,
7      navigation: {
8        nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
9        prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
10      },
11      effect: "fade", //フェードのエフェクト
12      autoplay: {
13        delay: 5000, // スライドが切り替わるまでの表示時間(ミリ秒)
14        stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
15        disableOnInteraction: false// ユーザーのスワイプ操作を検出したら自動再生を中止するか
16      },
17      speed: 2000,
18      //２秒かけながら次の画像へ移動
19    });
20  }
21
22});