First, i am using Swiper, effect "coverflow" and this is my config:

const testSwiper = new Swiper('.test-swiper', {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    spaceBetween: 30,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    direction: 'horizontal',
    loop: true,
    lazy: true,
    mousewheel: false,
    freeMode: false,
    keyboard: {
      enabled: false,
    },
    // Pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
      hide: true,
    },
  });

The issue is that sometimes when you load the page you will see something like this.

The only way that you can make this odd layout disappear is to resize the screen and you will see this.

And I really have no clue on why and I have no idea how to debug on this issue, so I am hoping someone out there can give me some advice on how to debug or maybe any idea on this issue.

Thanks in advance.