swiper display: none에러

swiper-container를 감싸고 있는 div요소를 클래스를 통해 display:none처리 후 이벤트 발생 시 다시 display:block되는 코드를 작성해보았다. 그런데 hidden클래스가 추가 된 후 슬라이더가 노출되지 않는 에러가 발생했다.

이는 아래와 같이 observer: true, observeParents: true 속성을 이용해 해결할 수 있다.

new Swiper('.swiper-container', {
...
  observer: true,
  observeParents: true,
})