[JS] display:none이 된 요소에서 Swiper 사용법

원인 : Swiper 사용시 비노출(display :none) 요소에 사용하면 에러가 발생한다.

• 방법1. 해당요소와 부모요소를 감지하여 DOM에 변화가 생기면  초기화 하는 메서드를 추가 시켜줍니다.(observer : true, observeParents : true )
• 방법2. display : block 시 swiper init 후 display : none 시 destroy(초기화) 시켜 줍니다.
  
• 방법3. CDN버전7이상 사용하면 됩니다.(작성기준 최신버전 8.4.4 )
  (https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js)

결론 : 최신 버전의 Swiper(CDN)를 사용한다면 별도의 메서드 추가 없이 정상 작동 된다.

 

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.