如何修复 Carousel 的 Swiper Js 初始加载？

Question

我正在使用 swiper js：https://idangero.us/swiper/api/但问题是 使用时，初始加载首先显示单个轮播项目，然后开始显示其余项目。这就像一个小故障。

制作更清晰。如果我加载网站，我只会看到轮播中的第一个项目（红色框中），然后它将更改为布局，如图所示，有 4 个项目。

我发现如果我设置

max-width:25%;

就可以解决这种情况的问题。但如果每个视图的轮播中有 2 个项目，则 css 代码会将宽度固定为 25%。

有什么办法可以解决吗？请帮忙

Answer 1

将初始化函数调用点更改为下载所有图像的点。

$( window ).load(function() {
    var mySwiper = new Swiper ('.swiper-container', {
      // ...
    })
});

Answer 2

这是因为Swiper没有完全初始化。您可以使用预加载来显示滑动器，直到其完全初始化。 为此，您需要使用“onInit”

document.addEventListener("DOMContentLoaded", function() {
  var swiper = new Swiper('.mySwiper', {
    slidesPerView: 2,
    spaceBetween: 30,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    on: {
      init: function() {
        document.querySelector('.swiper-preloader').style.display = 'none';
        document.querySelector('.swiper').style.opacity = '1';
        document.querySelector('.swiper').style.visibility = 'visible';
      }
    }
  });
  swiper.init();
});

  html {
  height: 100%;
  }
  body {
  height: 100%;
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-container-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #007bff;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.swiper {
  opacity: 0;
  visibility: hidden;
}

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper-container-wrapper">
  <!-- Preloader -->
  <div class="swiper-preloader">
    <div class="loader"></div>
  </div>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <!-- Navigation -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>