[JS] 무한 carousel(슬라이드) 구현하기

javascript 영화 웹사이트 팀 프로젝트를 하던 도중 영화 포스터를 슬라이드 하는 기능을 맡게 되었다.
메인페이지에 띄우는 영화 슬라이드의 영화 목록은 총 20개이고, 20번째 영화 슬라이드에서 다음 슬라이드로 이동하는 버튼을 누르면 슬라이드 리스트의 1번째 영화로 돌아가도록 코드를 썼다.
하지만 이렇게 코드를 짜면 한 번에 영화 포스터 19개를 건너뛰며 돌아가는게 ux적으로 별로라고 생각했다.
그래서 20번째에서 다음 슬라이드로 넘어가거나 첫 번째에서 마지막 슬라이드로 넘어갈 때 자연스럽게 넘어가도록 만들기 위해 무한 슬라이드 관련 블로그들을 찾아보았다.
그 중에서 내가 선택한 방법은

1. 마지막 슬라이드를 복사해서 첫 번째 슬라이드의 앞에 붙이고 첫 번째 슬라이드를 복사해서 마지막 슬라이드의 뒤에 붙인다.
2. 첫 번째 슬라이드의 복사본(복사본까지 포함한 총 22(20+2)개의 슬라이드중 첫 번째)으로 이동되었을 때 or 마지막 슬라이드의 복사본으로 이동되었을 때 영화 슬라이드의 transition을 none으로 하고, 현재 슬라이드 위치를 복사본이 아닌 진짜 첫번째 or 마지막 슬라이드(슬라이드 리스트의 2번째, 21번째)로 이동시킨다.

이렇게 하면 자연스럽게 슬라이드를 무한 슬라이드처럼 보이게 할 수 있다.

const moveSlide = () => {
  slideWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
};

const slideAnimation = () => {
  slideWrapper.style.transition = "0.4s";
  setTimeout(() => {
    isSliding = false;
  }, 400);	// isSliding이라는 변수로 슬라이드가 넘어가는 `transition-duration` 시간인 0.4초가 지나야 슬라이드 버튼이 작동되게 0.4초의 setTimeout 지정
};

moveSlide는 현재 슬라이드 위치(currentSlide)만큼 슬라이드를 이동시키는 함수이고,
slideAnimation은 슬라이드가 첫 번째 슬라이드 or 마지막 슬라이드가 아닐 때 실행되는 함수이다.


슬라이드 이동 버튼을 눌렀을 때 실행되는 코드

e.target.className === "slide-prev-btn" ? currentSlide -= 1 : currentSlide += 1;
  moveSlide();

  if (currentSlide === 0) {
    setTimeout(() => {
      currentSlide = totalSlides - 2;
      slideWrapper.style.transition = "none";
      moveSlide();
      setTimeout(() => {
        isSliding = false;
      }, 0);
    }, 400);
  } else if (currentSlide === totalSlides - 1) {
    setTimeout(() => {
      currentSlide = 1;
      slideWrapper.style.transition = "none";
      moveSlide();
      setTimeout(() => {
        isSliding = false;
      }, 0);
    }, 400);
  } else {
    slideAnimation();
  }

위의 코드는 어떤 버튼을 눌렀냐에 따라 currentSlide를 더하거나 빼준 뒤moveSlide()를 실행하고,

2. 첫 번째 슬라이드의 복사본(복사본까지 포함한 총 22(20+2)개의 슬라이드중 첫 번째)으로 이동되었을 때 or 마지막 슬라이드의 복사본으로 이동되었을 때 영화 슬라이드의 transition을 none으로 하고, 현재 슬라이드 위치를 복사본이 아닌 진짜 첫번째 or 마지막 슬라이드(슬라이드 리스트의 2번째, 21번째)로 이동시킨다.

글 위에 있었던 이 말과 똑같이 실행되는 코드이다.

이렇게 구현함으로써 슬라이드가 무한 슬라이드처럼 보이게 만들 수 있다.