Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기

 

브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다.

 

1. 문제 확인

먼저 앞서 서론에서 이야기한 문제를 직접 확인해보겠습니다.

 

예시 화면은 좌, 우측의 각각의 영역이 있고 전체 너비 100%를 각각 60%, 40%로 나눠 가집니다. 좌측 영역에는 swiper 플러그인이 사용되었고, 우측 영역은 일반 콘텐츠이며 옆에 있는 QUICK 버튼을 클릭하면 열렸다 닫히는 형태의 UI 입니다.

 

See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on CodePen.

 

 

버튼을 이용해 우측 영역을 닫으면 좌측 영역의 너비를 100%로 만들고 싶어 그렇게 작업했는데, 스와이퍼 안에 콘텐츠 너비는 자동으로 조정되지 않아 다음 슬라이드의 사진이 보이는 현상이 나타납니다.

 

그럼 이제 좌측 영역을 자연스럽게 100%의 너비로 만드려면 어떻게 해야하는지 해결방법을 함께 알아보겠습니다.

 

2. 해결 방법

2.1. swiper 플러그인 최신 버전으로 업데이트

가장 쉬운 해결 방법은 swiper 플러그인 리소스를 최신 버전으로 업데이트 하는 것입니다. 위와 같은 문제는 구 버전의 swiper에서만 나타나는 현상이기 때문입니다. 이 포스팅을 하는 현재 날짜를 기준으로 가장 최신 버전인 v10.2.0 버전을 사용하면 너비가 자동으로 변환되지 않는 문제점이 쉽게 해결됩니다.

 

하지만 기존에 구축된 웹사이트를 유지보수 하거나 그 밖에 다른 이유로 구버전의 swiper를 사용해야만 하는 경우가 있을 수 있습니다. 그 경우에는 어떻게 해결할 수 있는지 다른 해결 방법을 알아보겠습니다. 구버전은 v.4.5.3 버전을 사용했습니다.

 

2.2. 스와이퍼를 감싼 컨테이터 요소의 너비가 변경될 경우, window의 resize 이벤트 발생시키기

스와이퍼 플러그인의 기본 기능에는 뷰포트의 너비가 달라질 경우(브라우저 창 너비가 달라질 경우) 내부 콘텐츠의 너비를 업데이트 해주는 기능이 있습니다. 우리는 이 기능에서 힌트를 얻어 문제를 해결할 수 있습니다.

(스와이퍼에 기본으로 내장된 메서드 중 스와이퍼 크기를 resize 해주는 소스가 있지만, 구버전에서는 동작하지 않습니다.)

 

// 스와이퍼 내부 콘텐츠 조정이 안 되는 문제 해결
const mainVisual = document.querySelector('.main-visual');

const mainViObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        // 강제로 window에 resize 이벤트를 발생시킨다.
      window.dispatchEvent(new Event('resize'));
    }
});

mainViObserver.observe(mainVisual);

 

스와이퍼를 감싸고 있는 컨테이너 요소의 크기가 resize될 경우를 감지하는 ResizeObserver 객체를 만들고, 컨테이너 요소의 resize가 감지되는 순간(즉, 스와이퍼 너비가 변하는 순간) 강제로 window에 resize 이벤트를 발생시키는 소스를 추가해주는 소스입니다.

 

이 소스를 사용하면 아래와 같이 스와이퍼의 너비가 변경될 때, 스와이퍼 내부 콘텐츠의 너비 또한 바로 변경되도록 해줄 수 있습니다.

 

See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on CodePen.

 

이번 포스팅에서는 Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하는 방법을 함께 알아봤습니다.

도움이 되셨길 바랍니다.

 

감사합니다.