如何修复Swouse Js初始加载轮播？

Question

I am using the swiper js: https://idangero.us/swiper/api/ but the problem is when used the initial loading shows the single carousel item first then remaining items starts showing up. Which behaves like a glitch.

Making is clearer. If i load the website i will only see the first item in the carousel (in the red box) then it will change to layout like in the image with 4 items.

I could find that if i set max-width:25%; that will fix the issue for this case. But if there are 2 items in the carousel per view that css code will fix the width 25%.

Is there any way to fix it? Please help

Answer 1

Change the point of the initialization function call to the point at which all images were downloaded.

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