통합검색

Javascript

[Javascript] swiper 슬라이드 개수가 모자란 경우 특정 엘리먼트를 찾아 숨김 처리하기

  • 2025.10.25 11:39:04


swiper 를 사용하는 영역에서 navigation 요소가 삽입될 부모 엘리먼트를 하나 만들어 놨는데,
ex) <div class="arrows_wrapper"><div class="arrows">.....navigation 이 곳에 삽입.....</div></div>

swiper 사용시 설정된 slidesPerView 보다 slide의 개수가 적은 경우 navigation 은 swiper에서 노출 시키지 않지만, arrows_wrapper 부모 엘리먼트는 그대로 남아있어.
arrows_wrapper에 설정된 margin, padding등의 스타일로 인해 swiper 하단에 불필요한 공백이 생기는 상황.

아래 코드는 swiper의 슬라이드 개수가 slidesPerView가 적은 경우 arrows_wrapper 엘리먼트를 찾아 숨김 처리하는 코드.


[!]swiper 코드[/!] 
const swiper = new Swiper(wrap.querySelector('.itemlist'), {
    loop: false,
    navigation: {
        prevEl: wrap.querySelector('.arrows_wrapper .arrows .prev'),
        nextEl: wrap.querySelector('.arrows_wrapper .arrows .next'),
        clickable: true
    },
    allowTouchMove: true,      // 모바일/PC 드래그 모두 허용
    simulateTouch: true,       // 마우스로 드래그 허용
    grabCursor: true,           // 마우스 올렸을 때 손바닥 커서
    speed: 500, // 슬라이드 전환 속도
    spaceBetween: 20, // 간격
    breakpoints: {
        1200: {
            slidesPerView: 4 // PC
        },
        750: {
            slidesPerView: 3 // 태블릿
        },
        0: {
            slidesPerView: 2, // 모바일
            spaceBetween: 10, // 간격
        }
    },
    on: {
        init(sw){ toggleUi(sw); },
        resize(sw){ toggleUi(sw); },
        breakpoint(sw){ toggleUi(sw); },
        slidesLengthChange(sw){ toggleUi(sw); }
    },
});


[!]swiper on 에서 실행되는 함수 (swiper 코드 아래 삽입)[/!] 
// 슬라이드 개수 적은 경우 특정 요소 숨김 처리
function toggleUi(sw) {
    const total = getRealSlidesLength(sw);
    const perView = getSlidesPerView(sw) * getRows(sw);
    const shouldHide = total <= perView;

    // 숨겨질 대상. 아래 부분 수정 (sw 기준으로 요소를 찾음.)
    const ele = sw.el.closest('.itemlist_wrap').querySelector('.arrows_wrapper');
    
    if (!ele) return;

    ele.style.display = shouldHide ? 'none' : '';

}
function getSlidesPerView(sw){
    const spv = sw.params.slidesPerView;
    if (spv === 'auto') return sw.slidesPerViewDynamic('current', true) || 1;
    return Number(spv) || 1;
}
function getRows(sw){
    return Number(sw.params.grid?.rows || 1) || 1;
}
function getRealSlidesLength(sw){
    // 1) virtual 모드가 '활성화'된 경우에만 사용
    const virtualEnabled =
        sw.params?.virtual === true ||
        sw.params?.virtual?.enabled === true ||
        sw.virtual?.enabled === true;

    if (virtualEnabled && Array.isArray(sw.virtual?.slides)) {
        return sw.virtual.slides.length;
    }

    // 2) loop 모드: 원본 개수 사용
    if (sw.params?.loop && Array.isArray(sw.originalSlides)) {
        return sw.originalSlides.length;
    }

    // 3) 기본
    return Array.isArray(sw.slides) ? sw.slides.length : 0;
}
리스트