코북
Keep going
코북
전체 방문자
오늘
어제
  • 분류 전체보기 (114)
    • Computer Science (20)
      • 인터넷 (10)
      • 운영체제 및 일반지식 (4)
      • 공통 요구사항 (4)
      • WAS (2)
    • DataBase (18)
    • JavaScript (22)
    • Spring (15)
    • Java (4)
    • ASP.NET (5)
    • C# (6)
    • 알고리즘 (8)
    • HTML5 + CSS (5)
    • Git & GitHub (5)
    • Machine Learning (5)
    • 좋은 글 공유 (1)

최근 글

최근 댓글

티스토리

hELLO · Designed By 정상우.
코북

Keep going

JavaScript

[Swiper API] swiper display none 이슈

2022. 3. 8. 15:56

팝업, 배너 형식으로 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

저작자표시 비영리 (새창열림)

'JavaScript' 카테고리의 다른 글

[JavaScript/jQuery] html 태그 인식 이슈  (0) 2022.03.30
[JavaScript/jQuery] 모달 이벤트 비교  (0) 2022.03.28
[JavaScript] 쿠키 라이프사이클 설정 시 사용한 내장 객체 정리  (0) 2022.03.07
[error/javascript] Uncaught TypeError: Cannot set properties of undefined (setting 'display')  (0) 2022.03.07
[error/javascript] Failed to load resource: the server responded with a status of 404 ()  (0) 2022.03.03
    'JavaScript' 카테고리의 다른 글
    • [JavaScript/jQuery] html 태그 인식 이슈
    • [JavaScript/jQuery] 모달 이벤트 비교
    • [JavaScript] 쿠키 라이프사이클 설정 시 사용한 내장 객체 정리
    • [error/javascript] Uncaught TypeError: Cannot set properties of undefined (setting 'display')
    코북
    코북

    티스토리툴바