Carousel

슬라이드 이미지.

직접 구현하기

직접 구현 하는것도 생각보다 어렵지는 않습니다.

슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 overflow: hidden 으로 만들어 다 가려버립니다.

그러면 슬라이드 컨텐츠들이 Container 안에 숨어있겠죠?

이제 로직을 통해 특정 버튼을 눌렀을 때 컨텐츠의 margin-left 에 음수 값을 더해주어서 이동시킬 거리만큼 당겨줍니다!

반대 방향으로 하려면 margin-left 값에 당길 거리를 더해주면 되겠죠?

이 로직을 통해 구현하면됩니다.

margin 대신 transform 속성을 이용할 수도 있습니다!

transform : translateX(-30%) 이런 식으로 전체 콘텐츠를 30% 씩 밀어서 구현해도 margin 이랑 같은 효과를 보이겠죠?

그런데 이 방법만 이용하면, 딱딱하게 끊겨서 움직이는 방식일 겁니다. 슬라이드는 스무스하게 움직여야 하는데 말이죠..

그러므로 transition 속성을 주어서 margin 값이 바뀔 때, 스무스하게 움직이게끔 해줍니다!

React-Slick - 문서도 깔끔하고 전형적인 슬라이드 느낌을 줄 수 있습니다. 문서가 워낙 정리가 잘 돼있다보니, 여러 예시들을 볼 수 있는 장점이 있네요
React-Material-Ui-Carousel - material-ui 와 연계성이 좋고 슬라이드가 넘어가는 애니메이션 설정이나, 화살표 설정 등 디테일한 설정을 변경할 수 있는 장점이 있습니다.
React Responsive Carousel - 반응형 슬라이드를 제공합니다. 이 라이브러리는 이미지 캐로셀만 지원하는 것 같더라구요! 이건 사용은 못해보았는데 npm 에서 다운로드 수가 압도적이길래 넣어봤습니다.