我的 Swiper Slider 中的图像幻灯片有什么问题？

问题描述

我的 SwiperJS Slider 中的图片幻灯片有什么问题？当我重新加载网页时，图片幻灯片在几秒钟内变得太大，然后又缩小到正常状态？请看下面的图片。如果您想重现问题，我也添加了代码。将HTML、CSS、JS复制到一个HTML文件中，然后运行代码，因为这里无法刷新网页。

Way too big picture bug

Bug in real time

gallery = new Swiper('.swiper__container',{
  slidesPerView: 4,pagination: {
    el: '.swiper__pagination',clickable: true
  }
});

.gallery {
  max-height: 360px;
}
.swiper__container {
  overflow: hidden;
}
.wrapper {
  position: relative;
  padding: 0 0 100% 0;
}
.wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<section class="gallery">
<div class="swiper__container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="wrapper">
        <img src="http://lorempixel.com/360/360/sports" alt="" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="wrapper">
        <img src="http://lorempixel.com/360/360/sports" alt="" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="wrapper">
        <img src="http://lorempixel.com/360/360/sports" alt="" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="wrapper">
        <img src="http://lorempixel.com/360/360/sports" alt="" />
      </div>
    </div>
    <div class="swiper-slide">
      <div class="wrapper">
        <img src="http://lorempixel.com/360/360/sports" alt="" />
      </div>
    </div>
  </div>
  <div class="gallery__pagination swiper-pagination-white"></div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）