如何修复轮播的 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', {
      // ...
    })
});