avatar
BrightDawn

[JS] Swiper.js Grid resize 문제

swiper slide grid를 변경하였을 때 resize에서 발생하는 문제점 해결 방법
6 months ago
·
2 min read

Swiper.js

Swiper.js란 모바일 및 데스크탑에 사용하기 적합한 오픈소스 JavaScript 라이브러리


Grid

CSS 그리드 레이아웃(= Grid Layout)은 페이지를 여러 주요 영역으로 나눌 수 있고, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 유용하다.


문제점

  • 모바일 분기점에서 강제로 column을 2줄로 떨굴 경우 swiper변경되는 width를 인식하지 못하는 문제 발생

  • grid를 사용할 경우 resize가 2번 이상 발생 시 인식하지 못함.


해결 방법

  • 모든 항목에 grid를 넣어주어야 한다.

  • swiper: 높이 잡기, swiper-slide: 높이 auto로 해주어야 한다.

  • 위 항목 중 하나라도 빠지면 해결되지 않는다.

    • 검색하였을 때 observe 로 해결했다는 내용도 많으나 나는 전혀 해결되지 않았다.