[Carousel] 캐로셀 만들기 #0

캐로셀은 이미 라이브러리로 많이 나와있고, 나도 또한 라이브러리를 이용해 프로젝트를 진행했었다.

• react slick
  https://react-slick.neostack.com/

캐로셀을 직접 만들어보려 한다. 일단 캐로셀을 구글에 검색하면 아래와 같이 출력된다.

캐로셀에 대한 정확한 의미는 이 블로그에 정말 잘 적혀있어서 이해가 쉬웠다. 감사합니답

위 블로그에서는 캐로셀을 직접 구현하는 방법을 직접 제시해주셔서 이를 바탕으로 구현해보려고 한다.

직접 구현 하는것도 생각보다 어렵지는 않습니다.
슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 Overflow를 hidden 으로 만들어 다 가려버립니다. 
그러면 슬라이드 컨텐츠들이 Container 안에 숨어있겠죠?
이제 로직을 통해 특정 버튼을 눌렀을 때 컨텐츠의 margin-left 에 음수 값을 더해주어서 이동시킬 거리만큼 당겨줍니다!
반대 방향으로 하려면 margin-left 값에 당길 거리를 더해주면 되겠죠?
이 로직을 통해 구현하면됩니다.
 
- margin 대신 transform 속성을 이용할 수도 있습니다!
transform : translateX(-30%)  이런 식으로 전체 콘텐츠를 30% 씩 밀어서 구현해도 margin 이랑 같은 효과를 보이겠죠?
 
그런데 이 방법만 이용하면, 딱딱하게 끊겨서 움직이는 방식일 겁니다. 슬라이드는 스무스하게 움직여야 하는데 말이죠..
그러므로 transition 속성을 주어서 margin 값이 바뀔 때, 스무스하게 움직이게끔 해줍니다!
 
음수마진에 익숙하지 않다면 아래 글을 참고해주세요!
webclub.tistory.com/541
출처: https://programming119.tistory.com/211 [개발자 아저씨들 힘을모아:티스토리]