SwiperJS Slider становится плоским после загрузки

$(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/[email protected]/swiper-bundle.min.css" rel = "stylesheet"/>
<script src = "https://unpkg.com/[email protected]/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, 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, 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, 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>
    </div>
  </div>
</div>