SwiperJS Slider 加载后变平

如何解决SwiperJS Slider 加载后变平

所以，我今天尝试为我的一个网站安装一个预加载器。

问题出在 swiper 滑块上（具有 3D Coverflow 效果）。当页面加载 swiper 滑块变平时，如果我调整浏览器的大小，它会返回到正常的 3D 视图。

$(window).on('load',function() {
  $(".loader").fadeOut(2000);
  $(".content-sector").fadeIn(2000);
});

var swiper = new Swiper('.swiper-container',{
  effect: 'coverflow',grabCursor: true,centeredSlides: true,slidesPerView: 'auto',coverflowEffect: {
    rotate: 30,stretch: 0,depth: 300,modifier: 1,slideShadows: true,},pagination: {
    el: '.swiper-pagination',});

.content-sector{
  display: none;
}            
.card-custom {
    position: relative;
    background: #fff;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
.swiper-slide {
    width: 400px;
}

/* Try changing the output window size*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/swiper@6.4.5/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@6.4.5/swiper-bundle.min.js"></script>
<div class="loader">
  <img src="https://i.pinimg.com/originals/a2/dc/96/a2dc9668f2cf170fe3efeb263128b0e7.gif" alt="" style="width:100%;">
</div>
<div class="content-sector">
  <div class="col-auto">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="card card-custom">
            <div class="sliderText bg-dark">
              <img src="img/default.png" class="rounded-circle shadow" width="180" height="180" alt="">
            </div>
            <div class="content">
              <h4>Person 1</h4>
              <p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Corporis quisquam at voluptatum,voluptatibus sequi earum? Similique officia atque vero impedit.</p>
              <a href="#" class="btn btn-custom">Read More</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card card-custom">
            <div class="sliderText bg-dark">
              <img src="img/default.png" class="rounded-circle shadow" width="180" height="180" alt="">
            </div>
            <div class="content">
              <h4>Person 1</h4>
              <p>Lorem ipsum dolor sit amet consectetur,voluptatibus sequi earum? Similique officia atque vero impedit.</p>
              <a href="#" class="btn btn-custom">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

• HTML 代码

<div class="loader">
    <img src="img1.gif" alt="">
</div>
<div class="content-sector">
    ---Whole page content in here---
</div>

• JS 部分(jquery-3.5.1.min.js)

<script>
    $(window).on('load',function() {
        $(".loader").fadeOut(1000);
        $(".content-sector").fadeIn(1000);
    });
</script>

• 一个工作示例
  JSFiddle example

任何帮助将不胜感激。
谢谢。