캐러셀(Carousel) 만들기 (1)

캐러셀을 만드는 대중적인 방법으론 두가지가 있다.

• 첫번째는 이미지 배열을 이용해 만드는 방법
  https://www.youtube.com/watch?v=Kx8XlKRBZx8&t=242s

• 두번째는 translateX를 이용해 만드는 방법
  배열을 따로 만들어주기 귀찮기 때문에 나는 두번째 방법으로 진행했다.

아래는 매핑으로 메인 화면에 이미지만 뿌려준 상태다.

첫번째 사진은 평소에 보이는 화면
두번째 사진은 화면을 25%까지 축소한 화면이다.

보면 알겠지만 이미지가 하나만 있는게 아니라 내가 뿌려준 모든 이미지가 쭉 이어져있다.
이 상황에서 이미지에 transform: translateX(-100%)을 준다면 어떻게 될까?

자연스럽게 두번째 이미지로 넘어가진다. transloateX(0%)는 첫번째 사진을 보여주고
translateX(-100%)는 두번째 사진을 보여준다. 이제 이걸 이용해서 캐러셀을 구현하면 된다.

지금까지의 코드는 다음과 같다.

      <SliderContainer>
        <Slider>
          {movies?.map((movie) => (
            <SlideImage key={movie.id} src={makeBgPath(movie.backdrop_path)} />
          ))}
        </Slider>
      </SliderContainer>
      
const SliderContainer = styled.div`  
  display: flex;
  overflow: hidden;
`;

const Slider = styled.div`
  display: flex;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%);
`;

const SlideImage = styled.img`
  width: 100%;
  background-size: cover;
  background-position: center center;
  mask-image: linear-gradient(to top, transparent, black 30%);
  -webkit-mask-image: linear-gradient(to top, transparent, black 30%);
  object-fit: cover;
  aspect-ratio: 16/9;
`;