marquee 소스 문의드립니다. 채택완료

</p>

<pre>
const marquee = document.querySelector('.marquee');
const slides = marquee.querySelectorAll('span');
const slideWidth = slides[0].offsetWidth;
const slideCount = slides.length;

let currentSlide = 0;
let isSliding = false;

function slide() {
  if (!isSliding) {
    isSliding = true;

    marquee.style.transform = `translateX(-${currentSlide * slideWidth}px)`;

    currentSlide++;

    if (currentSlide >= slideCount) {
      currentSlide = 0;
    }

    setTimeout(() => {
      isSliding = false;
      slide();
    }, 5000);
  }
}

slide();</pre>

<p>

</p>

<pre>
.marquee {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.marquee div {
  display: flex;
  width: calc(100% * 5);
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}</pre>

<p>