[TIL] 이미지 슬라이드 (캐러셀) 구현하기_1 (노 라이브러리)

🧑🏻‍🏫 Intro

slick 라이브러리로 이미지 슬라이드 기능을 깔끔하게 구현할 수 있지만,
직접 구현해 보겠다는 욕심으로 이미지 슬라이드에 도전해봤다.

🧑🏻‍💻 과정

라이브러리 만드신 분들 존경... 대단하십니다 증말

궁극적으로 완성시킬 이미지 슬라이드 기능은 다음과 같다.

• 무한 슬라이드
  - 맨 마지막 슬라이드에 왔을 때, 버튼을 누르면 첫 슬라이드가 보일 수 있는 기능
• dot
  - 몇번째 이미지인지 이미지 슬라이드 밑에 표시할 수 있는 기능
• 자동 슬라이드
  - 버튼을 누르지 않아도 슬라이드가 계속 진행 되는 기능
  

한참 걸릴지도 모르겠지만 일단 하나씩 해보도록 했다.

가장 먼저로는 [무한 슬라이드] 기능을 건드려봤다.

💥 code

///JS

 const [currentIndex, setCurrentIndex] = useState(0);
  const newImgArr = list;
  let nextIndex = currentIndex + 1;
  let prevIndex = currentIndex - 1;
  const slideImageBox = useRef();

  const handleImgSlide = (e) => {
    const { name } = e.target;
    if (name === 'right') {
      if (currentIndex === 4) {
        slideImageBox.current.style.transform = `translateX(0%)`;
        setCurrentIndex(0);
      } else {
        slideImageBox.current.style.transform = `translateX(${
          nextIndex * -100
        }%)`;
        setCurrentIndex(currentIndex + 1);
      }
    } else {
      if (currentIndex === 0) {
        slideImageBox.current.style.transform = `translateX(-400%)`;
        setCurrentIndex(4);
      } else {
        slideImageBox.current.style.transform = `translateX(${
          prevIndex * -100
        }%)`;
        setCurrentIndex(currentIndex - 1);
      }
    }
  };

currentIndex로 현재 사진의 인덱스를 나타내고
nextIndex 와 prevIndex 로 다음, 이전 인덱스를 나타냈다.

버튼을 눌렀을 때, 버튼의 name을 확인해 왼쪽인지 오른쪽인지를 판단하도록 하고,
해당 name에 따라서 translateX를 적용시켜서 이동할 수 있도록 했고,
가장 마지막 인덱스에 오면 맨 처음 인덱스로 이동할 수 있도록 했다.

📌 결과

결과는 일단 무한슬라이드는 되긴 하는 것처럼 보이긴 하지만
맨 처음 생각했던 것 처럼, 자연스럽게 5에서 1로 넘어가지 않는다.

이 방법은 조금 더 고려해봐야겠다