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

🧑🏻‍🏫 Intro

지난번 무한 슬라이드 기능을 구현해내고, 이번에는 2번째 목표인 dot 기능을 넣어볼까 한다.
Index를 활용해서 기능을 구현해 보려고 하는데.. 어?

🧑🏻‍💻 과정

와 과거의 나야 너무 고맙고 감사하다.
덕분에 공수가 엄청 줄었다.

보통 미래에 받을 고통은 미래의 나에게 넘겨서 과거의 나를 원망하는 경우가 많은데,
이번에는 과거의 나를 사랑할 수 밖에 없었다 ㅋㅋㅋ
미리 현재 인덱스에 대한 값을 만들어 놔서
이번에는 그걸 활용한 스타일링만 하면 되는 간단한 작업이었다 ㅎㅎ

💥 code

{list.map((url, index) => {
    return (
      <S.DotBtn key={url} id={index} check={index === currentIndex} />
    );
})}

난 지금 styled-component를 사용하고 있는데,
최초에 받아온 이미지 배열의 index와 currentIndex값을 비교해서
일치하는 것만 색을 변경해주는 방식으로 구현했다.

📌 결과

 슬라이드 아래 작지만 소중한 dot 친구들이
이미지가 움직이는 것에 따라서 변화되는 것을 보여주고 있다 ㅎㅎ