React에서 슬라이드를 구현하는 방법 중 하나가 Swiper 라이브러리를 사용하는 것이다. 간단한 기능은 구현하는데 어려움이 없으나 개발하다보면 특이한 기능이 필요한 경우가 있다. 그런 기능을 직접 구현해보면서 아카이빙할 계획이다. 일반적인 Auto Play 컴포넌트이다. // ... 몇가지 옵션을 필요에 따라 줄 수 있겠지만 Auto Play를 위한 옵션만 주었다. ( 옵션 설명 생략 ! ) Pause Resume 먼저 자동 재생 기능을 사용하면 Progress가 나오는 경우가 있다. 다음 스크롤로 언제쯤 이동되는지 알려주는 기능이다. 해당 기능은 이미 Swiper의 데모에 잘 나와있는데, const handleAutoplayTimeLeft = (s, time, progress) => { progre..

swiper는 React 환경에서 뿐만 아니라 슬라이드를 사용하는 환경이면 생각나는 것이다. 아주 간단하게 슬라이드를 만들어주기 때문이다. autoplay, navigation, 등등 필요한 왠만한 모든 것이 다 있다. 그런데, 작업을 하다가 한 가지 문제가 있었다. autoplay로 설정된 슬라이드가 시작과 끝 부분은 정상적인 속도이지만 화면의 정면으로 가까워지면 점차 느려지는 것이다. 애석하게도 swiper는 이것을 해결하는 옵션을 가지고 있지 않은 것으로 보였다. 애매하게 말하는 이유는 내가 검색 키워드를 몰라서 찾지 못하는 것일 수 있다. 하지만 분명 이런 이동이 불편해지는 상황이 올 것이다. 그래도 다행인 것은 swiper의 css 설정이 어렵지 않은 것이였다. 해결하기 위해서 swiper에서 ..