[JS] swiper.js / 작동이 안 될 때

[JS] swiper.js / 작동이 안 될 때

 

 

swiper슬라이드가 작동을 안하는 이유가 있다.

 

주로 한페이지에서 컨테이너가 display:none이 block등으로 다시 보여졌을 때 작동이 안 되는 이슈이다.

 

문제를 해결하는 방법은 간단하다.

 

문제해결방법

swiper를 선언한 스크립트에다가 아래의 두 개의 코드를 추가하면 정상적으로 작동한다.

observer: true,
observeParents: true,

 

적용을 한다면 아래와 같다.

 

<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination', 
    observer: true,
    observeParents: true,
});
</script>

 

 

 

함께 보면 좋은 글

응용 : [JS] swiper.js / 페이지 이동

[JS] swiper.js / 페이지 이동

 

 

기초 : [JS] swiper.js / swiper슬라이드

[JS] swiper.js / swiper슬라이드