[React] 자동 무한 롤링 슬라이드 구현

✨ 구현된 모습

압축햇더니 완전 이상...

 

---

🙏 도움받은 블로그

React - 무한 롤링 슬라이드(배너) 구현하기 :: 개발 흔적 남기기 (tistory.com)

[Javascript] 자동 롤링 배너를 만들어보자! (velog.io)

---

 

해당 애니메이션의 명칭이 맞는지 잘 모르겠으나, 구글링 해보니 몇몇분들이 해당 네임을 쓰고있어서 나도 그냥 자동 무한 롤링 슬라이드라고 부르기로 했다(ㅎㅎ)

 

원리는 간단했으나 @keyframes에 대한 이해가 아직은 부족해서 따라하는 것만으로도 벅차다ㅠ

나의 경우 원본 슬라이드와 복제 슬라이드를 아래 사진과 같이 배치하여 함께 돌아가도록  했다 !!

 

CSS

const Silde = styled.div`
  position: relative;
  opacity: 0.8;
`;
const MovieList = styled(RowView2)`
  margin-top: 3rem;
  animation: 60s linear infinite normal none running infiniteAnimation1;
  &.clone {
    position: absolute;
    top: 0%;
    animation: 60s linear infinite infiniteAnimation2;
  }
  @keyframes infiniteAnimation1 {
    0% {
      transform: translateX(0%);
    }
    50% {
      transform: translateX(-100%);
    }
    50.1% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  @keyframes infiniteAnimation2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
`;
const Movie_Pic = styled(Icon)`
  width: 10rem;
  margin: 0rem 0.5rem 0rem 0.5rem;
  border-radius: 5px;
`;

 

슬라이드 컴포넌트

const Silde = () => {
  return (
  	<Silde>
		<MovieList>
			{moiveList.map((list, idx) => {
        	    return <Movie_Pic key={idx} src={list.poster_path} />;
      	    })}
       	 </MovieList>
       	 <MovieList className="clone">
          	{moiveList.map((list, idx) => {
        	    return <Movie_Pic key={idx} src={list.poster_path} />;
    	      })}
		</MovieList>
	</Silde>
	);
};