Lpla 개발 블로그

JavaScript/실전

[JavaScript] Slick.js 반응형 rows 이슈

대다수가 그렇듯 나도 캐러셀(Carousel) 라이브러리 중에 스와이퍼(Swiper.js)와 슬릭(Slick.js)을 자주 사용한다. 그런데 얼마 전 Slick을 사용하면서 아래와 같은 이슈를 겪었다. 먼저 Slick으로 한 화면에 5개의 슬라이더가 보이도록 만들었다. 그리고 반응형 작업을 위해 breakpoint 로 1280px 이하는 슬라이더가 3개만 보이도록, 그리고 768px 이하는 슬라이더가 가로 2, 세로 2 즉 2x2 = 4개가 보이도록 만들었다. 여기까지는 의도대로 잘 작동하고 있다. 하지만 768px 에서 다시 브라우저 크기를 늘리게 되면? 위 그림처럼 2줄에서 1줄로 바뀌지도 않고 좌우여백도 제대로 작동하지 않는 이슈가 생겼다. 전체 코드는 다음과 같다. 이 이슈는 rows 값을 건드릴..