swiper centeredSlides 오류 해결 간단 팁
요즘은 퍼블리셔와 개발의 경계마저도 모호해지고 있지만 퍼블리셔의 중요성이 개발자만큼이나 높아지고 있습니다. 서로 협업을 해야 하는 관계에서 명확하게 퍼포먼스를 내주는 퍼블리셔는 어디서나 환영받죠.
기본적으로 자기가 다 코드를 짜면 좋겠지만 여러가지 이유로 다양한 라이브러리를 사용하게 되는데, Swiper는 그런 플러그인 중에 슬러이더로 많이 사용되고 있습니다.
스와이퍼가 다양한 옵션과 형식을 지원하지만 옵션을 선택하다 보면 가끔 원하는 대로 동작하지 않는 경우가 있는데요. swiper centeredSlides 사용 시 페이지 리로드는 괜찮지만 resize 할 때 가운데가 잘 안 맞는 경우가 있습니다.
이럴 땐 spaceBetween 옵션 때문에 오류가 생기는거라 spaceBetween을 0으로 수정하고 각 slide에 margin이나 gap으로 간격 주면 해결할 수 있습니다. 참고로 flex에서도 gap을 사용할 수 있어서 Grid로 구성하지 않아도 간격 조정하기가 쉬워요.
저처럼 Swiper의 오류 때문에 고통 받고 있다면 한번 활용해보세요.