SwiperJS Slider 加载后变平

Question

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

问题出在滑动滑块（具有 3D Coverflow 效果）。当页面加载时，滑动滑块变平，如果我调整浏览器的大小，它 returns 到正常的 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, 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>

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

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

Answer 1

您的问题与您造成的一些冲突有关。

加载时 .content-sector 显示为 none（内置滑动器）

.content-sector{
  display: none;
}

此场景“破坏”了 swiper Core cube 计算。为什么？（你应该打开 GitHub 发布一个 ask/report）。

现在删除display: none;（或更改为显示：none；在刷卡加载后通过代码）。

接下来看起来 Jquery 动画也破坏了布局。

如果您想为滑动条创建 fade-in 效果 - 现在，在内容上方使用白色覆盖层。

片段：

/* Initialize Swiper */
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',
  },
});

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

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

<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, 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>

SwiperJS Slider 加载后变平

SwiperJS Slider becomes flat after loading

jquery

swiper