[JS] Swiper.js Grid resize 문제
swiper slide grid를 변경하였을 때 resize에서 발생하는 문제점 해결 방법
Swiper.js
Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스
JavaScript
라이브러리
Grid
CSS 그리드 레이아웃(= Grid Layout)은 페이지를 여러 주요 영역으로 나눌 수 있고, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 유용하다.
문제점
모바일 분기점에서 강제로
column
을 2줄로 떨굴 경우swiper
가변경되는 width
를 인식하지 못하는 문제 발생grid를 사용할 경우
resize
가 2번 이상 발생 시 인식하지 못함.
해결 방법
모든 항목에
grid
를 넣어주어야 한다.swiper: 높이 잡기
,swiper-slide: 높이 auto
로 해주어야 한다.위 항목 중 하나라도 빠지면 해결되지 않는다.
검색하였을 때
observe
로 해결했다는 내용도 많으나 나는 전혀 해결되지 않았다.