원인 : 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)를 사용한다면 별도의 메서드 추가 없이 정상 작동 된다.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > Javascript' 카테고리의 다른 글
| [JS] input [type="file"] 용량 제한 (0) | 2023.06.09 |
|---|---|
| [JS] 카운트업(CountUp.js) 사용법 (0) | 2022.12.28 |
| [JS]클립보드(clipboard.js) 사용법(복사하기) (0) | 2022.09.02 |
| [JS] 스크롤 올릴때 헤더,네비 고정하기 (1) | 2022.03.22 |
| [JS] 이미지 비교 슬라이드(Image Comparison Slider) (0) | 2022.01.10 |