탭을 구성할때 css로 display:none; -> display:block; 처리할때가 많다.
이때 탭안에 상세 내용으로 각자 다른 Swiper를 정의했을 때 동작이 안되는 경우가 발생한다.
https://swiperjs.com/api/#parameters
파라미터 중에서 Observer 영역을 확인해보자.
Observer
| observer | boolean | false | Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides) |
| observeParents | boolean | false | Set to true if you also need to watch Mutations for Swiper parent elements |
| observeSlideChildren | boolean | false | Set to true if you also need to watch Mutations for Swiper slide children elements |
Swiper API
Swiper API Improve this Doc Swiper Full HTML Layout Slide 1 Slide 2 Slide 3 ... Initialize Swiper Now, when we have Swiper's HTML, we need to initialize it using the following function: new Swiper(swiperContainer, parameters)- initialize swiper with option
swiperjs.com
각자 상황에 맞춰 파라미터를 설정하면 작동이 잘된다.
공부하면서 기록(?)용으로 메모하고 있습니다.
부족하더라도 참고로 봐주세요.