Swiper.js - Infinte + Loop + Autoplay

Swiper.js를 사용해서 작업을 하다가 서버에서 swiper-slide를 만들어 사용하던 도중 데이터가 부족해 슬라이드가 중간에 끊기는 상황이 발생해서 이슈에 대해서 써보려고 한다.
 
일단 기능 자체로는 간단하게 "자동 무한 루프" 슬라이드인데 Swiper.js에 이 기능을 만들기 위해서 소스를 보여주자면
 

  let swiper = new Swiper(".swiper", {
    slidesPerView: "auto",
    loop:true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false
    },
    speed: 5000,
  });

대충 이 소스인데 소스 자체로는 문제가 될게 없다. 근데 문제는 500px 짜리 swiper-slide를 한 개만 만들었을 때 loop가 작동되지 않았다. 기본적으로 loop를 true로 설정하면 swiper-slide가 클론이 2개가 생기고 1000px짜리 윈도우 화면에서 확인해보면 작동은 하나 마지막 클론 요소에서 끊어지는걸 볼 수 있었다.
 
그럼 Loop는 언제 작동을 제대로 하나 테스트를 해봤는데 클론된 요소에 사이즈가 아니라 우리가 사이즈를 준 요소에 크기 만큼에 브라우저 사이즈로 봐야 제대로 작동한다.
 
즉, 500px 크기에 swiper-slide를 돌리려면 500px 화면에서 확인을 해야 제대로 loop가 작동되는 걸 볼 수 있었다.
(swiper-slide 사이에 간격은 잘 모르겠음.)
 
하지만 대체적으로 요소를 하나만 만들어 사용하는게 아니라 여러개 요소를 만들어서 사용하는 편이니까 그런 상황에 맞게끔 작업을 하기 위해선 클론에 요소들을 제외한 직접 swiper-slide를 만든 요소들이 화면 사이즈 만큼에 크기를 가지고 있어야 한다.
 
콘텐츠가 부족해서 화면 사이즈에 맞추지 못할 만큼에 slide 밖에 없다면 우리는 동일한 swiper-slide를 복사 붙여넣기해서 화면 사이즈에 맞게끔 제작을 해야한다는 말이다.  보통 화면 사이즈가 크게 사용하면 2560 혹은 3000 이상도 갈 경우가 있으니 상황에 맞게 css로 width 값을 조정해주는 것도 방법일 듯 하다.
 
(테스트는 다들 해보시길...)