캐러셀(Carousel) 만들기 (1)에서 이미지의 transform: translateX(0%)을 바꾸면 다음 사진으로 넘어갈 수 있다는걸 알았다. 그럼 특정 시간이 지났을때 다음 사진으로 넘어가게 하려면 어떻게 해야할까? 아직 해보진 않았지만 setInterval을 이용하면 될 것 같다.
setInterval을 사용해 일정 시간마다 transform: translateX(0%)를 0%에서 -100%씩 감소해 최대 이미지 개수만큼 감소하면 될 것같다. 최대 이미지가 15개면 -1500%까지 감소하겠지.
useEffect(() => {
const interval = setInterval(() => {
if (index === total) clearInterval(interval);
setIndex((prev) => prev + 1);
}, 3000);
return () => clearInterval(interval);
}, [total]);
const Slider = styled.div<{ $total?: number; $index: number }>`
display: flex;
transition: transform 0.5s ease-in-out;
transform: translateX(${(props) => props.$index * -100}%);
`;
3초마다 index는 1씩 증가하고 index가 total(최대 이미지 개수)와 같아지면 Interval을 멈춘다. 그리고 index는 아래 스타일 컴포넌트에서 $index * -100%씩 감소된다.
정상적으로 작동하지만 최대 이미지 개수에 도달하면 검은 화면만 보인다는 문제가 있다. 당연한거다. 저 뒤엔 이미지가 없으니까. 최대 이미지 개수에 도달하면 index를 1로 초기화 하는 방법은 어떨까?
너무 조잡스럽다. 첫번째 이미지로 되돌아가는 과정에서 이전에 있던 모든 이미지를 거쳐서 이동하는게 마음에 안든다. 자연스럽게 첫번째 이미지로 돌아가는 방법이 있을까? 지금 당장은 명확한 해결 방법이 안떠오른다.
