[Defect] 브라우저 리사이징(Resizing)할 때, 불안정한 Swiper 동작 해결

 
웹 개발에서 Swiper를 사용하면 간편하게 슬라이드 기능을 구현할 수 있지만, 브라우저 리사이징 중에 Swiper가 제대로 동작하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래와 같은 방법을 통해 Swiper를 안정적으로 유지할 수 있습니다.
 

let eventSwiper;
		
function initializeSwiper() { //Swiper 초기화 함수
    const eventSwiper = new Swiper('.swiper', {
        loop: true,
        slidesPerView: 1,
        // spaceBetween: 10,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'fraction',
            renderFraction: function (currentClass, totalClass) {
                return '<span class="' + currentClass + '"></span> | <span class="' + totalClass + '"></span>';
            },
        },
    });
}

initializeSwiper(); //초기화 함수 호출

window.addEventListener('resize', function() { //Window Resize 이벤트 핸들러
    eventSwiper.destroy(); //Swiper 파괴
    initializeSwiper(); //재초기화
});

 
이렇게 전역으로 Swiper 인스턴스를 선언하고, 리사이징 이벤트가 발생할 때 Swiper를 파괴하고 다시 초기화하여 안정적인 동작을 유지할 수 있습니다.
 
 
 
 

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

 

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

 

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()