[JavaScript] 무한 롤링 배너

HTML

<div class="carousel">
  <div class="carousel-wrapper">
    <div class="carousel-item">
      <img src="slide01.png" alt="">
    </div>
    <div class="carousel-item">
      <img src="slide02.png" alt="">
    </div>
    <div class="carousel-item">
      <img src="slide03.png" alt="">
    </div>
  </div>
</div>

 

CSS

.carousel {
  max-width: 100%;
  height: 200px;
  overflow: hidden;
}
.carousel .carousel-wrapper {
  width: 300px;
  height: 200px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
.carousel .carousel-wrapper .carousel-item {
  width: 100px;
  height: 200px;
}

 

 

JS

const carouselContainer = document.querySelector('.carousel');
const carouselWrapper = document.querySelector('.carousel-wrapper');
let carouselItems = document.querySelectorAll('.carousel-item');
let itemWidth = carouselItems[0].offsetWidth;

const frameRate = 1000 / 60;

let margin = 0;

let timeline = setInterval(() => {  
margin += 1
if (margin >= itemWidth) {
  let firstItem = carouselItems[0].innerHTML;
  carouselItems[0].parentNode.removeChild(carouselItems[0]);
  carouselItems = document.querySelectorAll('.carousel-item');
  margin = 0;

  let elem = document.createElement('div');
  elem.setAttribute('class', 'carousel-item');
  elem.innerHTML = firstItem;
  carouselWrapper.appendChild(elem);
}

carouselWrapper.setAttribute("style", `margin-left: -${margin}px`);
}, frameRate)