react로 이미지 슬라이드를 쉽게 구현하고자 한다.✍🏻 기술스택 : React, tailwind.css나의 경우 두가지 경우로 구현하였다.1. animation을 이용하여 구현하기작동 방식보여주고 싶은 카드들의 배열을 만들고, 이를 복제하여 나타낸 뒤 번갈아 가며 보여주는 방식이다. 내가 만들고자 하는 컴포넌트들의 컨테이너를 배너라고 칭한다.[원본 배너]- 원본 배너와 복제 배너를 한 방향으로 이동시켜주는 애니메이션을 실행시킨다- 원본 배너가 배너 너비만큼 이동하면, 복제 배너의 뒤로 이동시킨다.- 원본 배너는 다시 배너 너비만큼 이동한다.[복제 배너]- 복제배너는 일정 방향으로 배너크기의 2배만큼 이동시켜주면 된다.- 사용자는 마치 하나의 배너가 무한으로 렌더링되는 것처럼 보인다..- 사실..
이미지슬라이더
반응형
반응형