랜딩 페이지 작업을 할 때에 하나의 html에 swiper를 두 개 사용하면서
각각의 스와이퍼를 display: none, block 처리 해야하는 경우가 있따.

이런 경우에는 swiper가 첫번째 display : block처리되어있는 곳에는 잘 적용이 되지만
none을 풀 때 (두번째로 적용될 swiper) 에는 적용이 제대로 되지 않는 이슈가 있다.

해결방법

mySwiper = new Swiper('.swiper', {
                    centerInsufficientSlides: true,
                    slidesPerView: 'auto',
                    spaceBetween: 20,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    breakpoints: {
                        550: {
                            slidesPerView: 'auto',
                            centerInsufficientSlides: false,
                        }
                    },
                    observer: true,
                });

observer:true 를 추가해주기만 하면 바로 된다.
이걸로 한시간 넘게 날렸는데.... 허무하면서.... 잊지않기위해 기록한다.

참고블로그

https://lpla.tistory.com/129