스와이퍼 미디어 쿼리 문제

스와이퍼 11 버전 사용하는데 미디어 쿼리 브레이크 포인트가 적용한데 버그 생겼다.

예를들어서 2개 노드가 있는데 가로 1px로 나오는 버그? 현상이 나고 노드 5개 있을때는 아무런 문제 없다.

그래서 챗 지피티한테 물어봤다

 

 

🔍 원인 분석

1. Swiper의 컨테이너 크기가 제대로 설정되지 않음
   • .swiper 요소의 width가 너무 작거나 display: none; 상태에서 초기화될 경우, 슬라이드가 **잘못된 크기(예: 1.8px)**로 계산될 수 있음.
2. Swiper가 초기화될 때 breakpoints 적용이 안됨
   • Swiper는 초기화 시점의 컨테이너 크기를 기준으로 슬라이드를 배치하기 때문에, 페이지 로드 이후 display가 변경되거나 스타일이 동적으로 추가될 경우 문제가 발생할 수 있음.
3. Swiper가 초기화되었지만 다시 업데이트되지 않음
   • window.resize 이벤트 등을 통해 Swiper를 업데이트(재설정) 해야 하는 경우가 있음.

 

 

 

🛠 해결 방법

다음 코드처럼 3가지 해결책을 적용하면 됩니다.

✅ 1. .swiper 컨테이너의 크기 강제 설정

.section4 .swiper {
    width: 100% !important;
    height: auto !important;
    overflow: visible;
}

• width: 100%를 강제 적용하여 Swiper가 크기를 올바르게 계산하도록 함.
• overflow: visible;로 설정하면 내부 아이템이 잘리지 않음.

 

 

✅ 2. breakpoints 적용 후 초기화 강제 업데이트

document.addEventListener("DOMContentLoaded", function() {
    const bcSlider = new Swiper(".section4 .swiper", {
        slidesPerView: 5,
        spaceBetween: 10,
        watchOverflow: true,
        navigation: {
            nextEl: ".bv_sec04_next_btn",
            prevEl: ".bv_sec04_prev_btn",
        },
        pagination: {
            el: ".bv_sec04_pagination",
            type: "custom",
            renderCustom: function (swiper, current, total) {
                return `${current} / ${total}`;
            }
        },
        breakpoints: {
            320: { slidesPerView: 1, spaceBetween: 10 },  // 모바일
            480: { slidesPerView: 1, spaceBetween: 10 },  // 작은 태블릿
            768: { slidesPerView: 3, spaceBetween: 10 },  // 일반 태블릿
            1024: { slidesPerView: 4, spaceBetween: 10 }, // 작은 데스크탑
            1280: { slidesPerView: 5, spaceBetween: 10 }  // 큰 데스크탑
        }
    });

    // ✅ 강제 업데이트 실행
    setTimeout(() => {
        bcSlider.update();
    }, 100);
});

 

여기서 일부 브레이크 포인트만 카피해서 적용하면된다. 강제 업데이트 소스코드는 필요 없어보인다.

 

 

🚀 최종 적용 코드 (CSS + JS)

✅ CSS (컨테이너 크기 문제 해결)

.section4 .swiper {
    width: 100% !important;
    height: auto !important;
    overflow: visible;
}

✅ JS (breakpoints & 업데이트 적용)

document.addEventListener("DOMContentLoaded", function() {
    const bcSlider = new Swiper(".section4 .swiper", {
        slidesPerView: 5,
        spaceBetween: 10,
        watchOverflow: true,
        navigation: {
            nextEl: ".bv_sec04_next_btn",
            prevEl: ".bv_sec04_prev_btn",
        },
        pagination: {
            el: ".bv_sec04_pagination",
            type: "custom",
            renderCustom: function (swiper, current, total) {
                return `${current} / ${total}`;
            }
        },
        breakpoints: {
            320: { slidesPerView: 1, spaceBetween: 10 },  
            480: { slidesPerView: 1, spaceBetween: 10 },  
            768: { slidesPerView: 3, spaceBetween: 10 },  
            1024: { slidesPerView: 4, spaceBetween: 10 }, 
            1280: { slidesPerView: 5, spaceBetween: 10 }  
        }
    });

    // ✅ Swiper 강제 업데이트 (초기 크기 문제 해결)
    setTimeout(() => {
        bcSlider.update();
    }, 100);

    // ✅ 화면 크기 변경 시 Swiper 업데이트
    window.addEventListener("resize", function() {
        bcSlider.update();
    });
});

 

 

💡 최종 정리

✅ breakpoints가 적용되지 않는 이유:

1. 컨테이너 크기 오류 → .swiper의 width가 너무 작음 (width: 100% !important; 설정)
2. 초기화 타이밍 문제 → setTimeout(() => { bcSlider.update(); }, 100); 추가
3. 창 크기 변경 감지 필요 → window.addEventListener("resize", function() { bcSlider.update(); });

위 방법을 적용하면 Swiper의 breakpoints가 정상적으로 작동하고, 너비 문제도 해결됩니다! 🚀

 

여기서 힌트를 얻는데 1번째 css만 적용 했더니 바로 문제 해결 됐다.  

혹시 몰라 최종 소스코드 남겨본다. 응용해서 사용하자