본문으로 건너뛰기

Auto Resize

autoResize와 useResizeObserver 옵션으로 뷰포트 크기 변경 감지 방식을 제어합니다.

슬라이더로 컨테이너 너비를 변경하면서, 두 캐러셀의 리사이즈 반응 차이를 비교해 보세요.

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

// useResizeObserver: true (default)
const flickA = new Flicking("#flick-observer", {
  autoResize: true,
  useResizeObserver: true
});

// useResizeObserver: false
const flickB = new Flicking("#flick-window", {
  autoResize: true,
  useResizeObserver: false
});

let countA = 0;
let countB = 0;
const countElA = document.getElementById("count-a");
const countElB = document.getElementById("count-b");

flickA.on("afterResize", () => {
  countElA.textContent = ++countA;
});
flickB.on("afterResize", () => {
  countElB.textContent = ++countB;
});

// Change container width via slider
const slider = document.getElementById("width-slider");
const valueLabel = document.getElementById("width-value");
const wrapA = document.getElementById("wrap-a");
const wrapB = document.getElementById("wrap-b");

slider.addEventListener("input", () => {
  const w = `${slider.value}%`;
  wrapA.style.width = w;
  wrapB.style.width = w;
  valueLabel.textContent = `${slider.value}%`;
});

// Toggle autoResize
const toggleBtn = document.getElementById("btn-toggle");
let autoResizeOn = true;
toggleBtn.addEventListener("click", () => {
  autoResizeOn = !autoResizeOn;
  flickA.autoResize = autoResizeOn;
  flickB.autoResize = autoResizeOn;
  toggleBtn.textContent = `autoResize: ${autoResizeOn}`;
  toggleBtn.classList.toggle("active", autoResizeOn);

  document.getElementById("manual-btn").style.display = autoResizeOn ? "none" : "inline-block";
});

document.getElementById("manual-btn").addEventListener("click", () => {
  flickA.resize();
  flickB.resize();
});
Open on CodeSandboxOpen Sandbox

요약​

주요 옵션​

옵션타입기본값설명
autoResizebooleantrue뷰포트 크기 변경 시 자동 resize() 호출
useResizeObserverbooleantrueResizeObserver 사용 여부 (false면 window resize)

옵션 조합 비교​

조합동작적합한 상황
autoResize: true + useResizeObserver: true요소 크기 변경 즉시 감지일반적인 사용 (기본값)
autoResize: true + useResizeObserver: falsewindow resize만 감지요소 크기는 고정, 창 크기만 변하는 경우
autoResize: false수동 resize() 호출 필요크기 변경 시점을 직접 제어하고 싶을 때

상세 설명​

autoResize​

autoResize: true(기본값)이면 뷰포트 크기가 변경될 때 자동으로 resize() 메소드를 호출합니다. false로 설정하면 개발자가 직접 flicking.resize()를 호출해야 합니다.

useResizeObserver​

useResizeObserver: true(기본값)이면 ResizeObserver API로 요소 단위 크기 변경을 감지합니다. false이면 window의 resize 이벤트만 감지하므로, 부모 요소 크기가 변해도 감지하지 못할 수 있습니다.

사용 시나리오​

언제 사용하나요?
  • 반응형 레이아웃: 기본값 그대로 사용 (autoResize + ResizeObserver)
  • 탭 전환 UI: autoResize: false로 탭이 활성화될 때만 수동 resize
  • 성능 민감 환경: useResizeObserver: false로 window resize만 감지

주의사항​

주의
  • autoResize: false로 설정한 경우, 뷰포트 크기 변경 후 반드시 resize()를 호출해야 합니다
  • useResizeObserver: false이면 CSS 레이아웃 변경(flex, grid 등)에 의한 크기 변경을 감지하지 못합니다

관련 링크​

관련 옵션​

관련 데모​