Slider2 [React/Next.js] 라이브러리 없이 구현하는 자동 재생 슬라이드 라이브러리를 사용하지 않고 무한 자동 재생 슬라이드 구현 포트폴리오에서 만든 광택 효과가 적용된 기술 스택 카드가 생각보다 커서 카드가 아닌 작은 아이콘으로 보여주기로 했다. 물론 그냥 보여주면 재미 없으니, 자동 재생 슬라이드로 직접 구현해보았다. 라이브러리는 필요없다 상남자에겐! 핵심 원리를 요약하자면, 충분히 긴 이미지 요소 만들기: 반응형 웹사이트이므로, 큰 해상도에도 슬라이드가 끊어지지 않도록 최대 해상도에서도 가득 찰 정도로 이미지 요소를 만들어 한줄이 가득 보이게 함 한 사이클이 이동한 것처럼 보일만큼만 반복 이동 : 아이콘이 한 사이클만 이동하도록 하고, 그것을 애니메이션으로 반복하여 계속 이어서 움직이는 것처럼 보이게 함. (3배로 요소를 붙였으면, 1/3만큼 이동하면 한 사이클이 되겠다.. 2023. 12. 31. carousel 은 CSR 로 구현하자 메인 페이지의 배너를 히어로 캐러셀로 넣기 위해서 많이 쓴다는 embla 캐러셀을 사용하려 했으나 아래의 에러 발생... 해당 캐러셀의 공식 홈페이지에서 react 에서의 사용법으로 준 스켈레톤 코드 자체에 useRef 가 사용되어 있어서, hook을 사용하기 위해서는 CSR 을 적용하기 위해서 "use client" 를 사용해야만 했다.(Next.js 13버전의 CSR 구현법...) 근데, 메인 페이지 배너를 csr 로 만들고 싶지 않았으므로... 그냥 ssr 로 구현가능한 다른 라이브러리를 찾아보기로 했다 swiper slider 를 사용하였으나, 같은 에러가 발생하였다 그냥 "use client" 를 사용해서 CSR로 구현하면 된다지만, 히어로 캐러셀은 SSR로 만들고 싶었기에 더 찾아보았더니 아래.. 2023. 2. 23. 이전 1 다음
