[Swiper API] swiper display none 이슈

팝업, 배너 형식으로 swiper를 사용할 때, 페이지를 로딩한 직후에 슬라이더를 노출시키지 않게 설정해야 하는 경우가 있습니다. 

<div class = "class" style="display:none"></div>

 

다음과 같이 display:none 처리해주면 되지만 이럴 경우 swiper가 제대로 작동하지 않는 에러가 발생합니다.

이를 해결하기 위해서는 observer 매개변수를 추가해주면 됩니다.

<script>
var swiper = new Swiper('.swiper-container', {
        loop = true,
        loopAdditionalSlides : 1,
        pagination : {
            el : 'swiper-pagination',
            type : 'fraction',
            formatFractionCurrent: function (number) {
                return (number);
            },
            formatFractionTotal: function (number) {
                return (number);
            },
            renderFraction: function (currentClass, totalClass) {
                return '<span class="' + currentClass + '"></span>' +
                 ' / ' +
                 '<span class="' + totalClass + '"></span>';
            }
        },
        autoplay : {
            delay : 5000,
        },
        resistance : false,
        watchOverflow :true,
        // 추가!
        observer: true,
        observeParents: true,
});

</script>

 

 

 

 

출처 :

https://swiperjs.com/swiper-api#pagination