[TIL] react-slick의 carousel fade 사용 후기!

출처 : 인스타그램

 

인스타 웹버전을 보면 로그인화면 왼쪽에 여러개의 이미지가
carousel 형식으로 움직이고 있다.
(참고로 carousel은 회전 목마 라는 뜻이라네...
처음 알았음. 옆으로 쭉쭉 움직이는걸 carousel이라 하는건가?)

뷰는 90%정도 잡았고 이런 짜잘?한 부분들을 남겨두고 있는데,
조오금 미루다가 오늘 저녁에 맛난 대방어를 먹고 배부르고 기분좋게 코딩했돠

 

 

애초에 라이브러리를 사용 할 생각이었고, carousel를 검색해보니 뭐 bootstrap, npm 등 몇몇 라이브러리들이 나왔는데
팀원 분께서 bootstrap은 구식이다! react-slick를 사용해라! 고 추천해주셔서 slick으로 사용함.

사용방법은 어려운 것은 없었다. docs 읽으면서 install 할거 하고, import 할거 하고, 원하는 exam 복붙하면 끝.

나는 이미지를 그냥 단순하게 fade만 시키면 되는거라서 딱히 어려운게 없어보이는데
나중에 CSS를 고쳐야할 상황이 온다면 상당히 복잡할 것 같기도 하구...
오늘 내가 한거라곤 carousel component 하나 만들어서 fade exam에 autoplay exam 조금 덧붙인게 끝!
근데 뷰가 너무 이뻐진거같아서 뿌듯하다 :)
점점 인스타화면이랑 같아지는게 보이니깐 할 맛나는데 이제 기능 들어가면 이제 죽을 맛 나겠지? 희희

위치를 폰화면 안으로 맞춰야해서, 개발자 툴에 표시된 className에 css 적용했더니 됐음.

---

※ 참고 : https://react-slick.neostack.com/docs/get-started

※ 참고 : https://www.youtube.com/watch?v=lgBsm42Fs4k