Observe Panel Resize

observePanelResize 옵션으로 각 패널 요소에 ResizeObserver를 연결해, 패널 크기가 변경될 때 Flicking이 자동으로 레이아웃을 재계산하도록 합니다.

패널 안의 "넓히기" 버튼을 눌러 두 캐러셀의 차이를 확인하세요.

JavaScript

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

// observePanelResize: false (default)
const _flick1 = new Flicking("#flick-default", {
  align: "center",
  observePanelResize: false
});

// observePanelResize: true
const _flick2 = new Flicking("#flick-observe", {
  align: "center",
  observePanelResize: true
});

// Toggle panel width on button click
document.querySelectorAll(".expand-btn").forEach(btn => {
  btn.addEventListener("click", e => {
    e.stopPropagation();
    const panel = btn.closest(".flicking-panel");
    const isWide = panel.style.width === "70%";
    panel.style.width = isWide ? "40%" : "70%";
    btn.textContent = isWide ? "Expand" : "Shrink";
  });
});

Open Sandbox

React

import Flicking from "@egjs/react-flicking";
import { useRef } from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

function setupButtons(flicking) {
  flicking.panels.forEach(panel => {
    const btn = panel.element.querySelector(".expand-btn");
    if (!btn) return;
    btn.addEventListener("click", e => {
      e.stopPropagation();
      const isWide = panel.element.style.width === "70%";
      panel.element.style.width = isWide ? "40%" : "70%";
      btn.textContent = isWide ? "Expand" : "Shrink";
    });
  });
}

function FlickingDemo({ label, observePanelResize, hint }) {
  const ref = useRef(null);
  return (
    <div className="demo-container">
      <div className="demo-label">{label}</div>
      <Flicking
        ref={ref}
        align="center"
        observePanelResize={observePanelResize}
        onReady={() => setupButtons(ref.current)}
      >
        <div className="flicking-panel panel-1" style={{ width: "40%" }}>
          <div className="panel-inner">
            <span>Panel 1</span>
            <button className="expand-btn">Expand</button>
          </div>
        </div>
        <div className="flicking-panel panel-2" style={{ width: "40%" }}>
          <div className="panel-inner">
            <span>Panel 2</span>
            <button className="expand-btn">Expand</button>
          </div>
        </div>
        <div className="flicking-panel panel-3" style={{ width: "40%" }}>
          <div className="panel-inner">
            <span>Panel 3</span>
            <button className="expand-btn">Expand</button>
          </div>
        </div>
        <div className="flicking-panel panel-4" style={{ width: "40%" }}>
          <div className="panel-inner">
            <span>Panel 4</span>
            <button className="expand-btn">Expand</button>
          </div>
        </div>
        <div className="flicking-panel panel-5" style={{ width: "40%" }}>
          <div className="panel-inner">
            <span>Panel 5</span>
            <button className="expand-btn">Expand</button>
          </div>
        </div>
      </Flicking>
      <div className="demo-hint">{hint}</div>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <FlickingDemo
        label="observePanelResize: false (default)"
        observePanelResize={false}
        hint="Flicking does not detect panel resizing, causing misaligned layout"
      />
      <FlickingDemo
        label="observePanelResize: true"
        observePanelResize={true}
        hint="Flicking automatically recalculates layout when panels are resized"
      />
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- observePanelResize: false (default) -->
    <div class="demo-container">
      <div class="demo-label">observePanelResize: false (default)</div>
      <Flicking :options="{ align: 'center', observePanelResize: false }">
        <div
          v-for="(panel, i) in panels"
          :key="i"
          class="flicking-panel"
          :class="panel.bg"
          :style="{ width: panel.wide ? '70%' : '40%' }"
        >
          <div class="panel-inner">
            <span>Panel {{ i + 1 }}</span>
            <button @click.stop="panel.wide = !panel.wide">
              {{ panel.wide ? 'Shrink' : 'Expand' }}
            </button>
          </div>
        </div>
      </Flicking>
      <div class="demo-hint">Flicking does not detect panel resizing, causing misaligned layout</div>
    </div>

    <!-- observePanelResize: true -->
    <div class="demo-container">
      <div class="demo-label">observePanelResize: true</div>
      <Flicking :options="{ align: 'center', observePanelResize: true }">
        <div
          v-for="(panel, i) in panels2"
          :key="i"
          class="flicking-panel"
          :class="panel.bg"
          :style="{ width: panel.wide ? '70%' : '40%' }"
        >
          <div class="panel-inner">
            <span>Panel {{ i + 1 }}</span>
            <button @click.stop="panel.wide = !panel.wide">
              {{ panel.wide ? 'Shrink' : 'Expand' }}
            </button>
          </div>
        </div>
      </Flicking>
      <div class="demo-hint">Flicking automatically recalculates layout when panels are resized</div>
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const bgs = ["panel-1", "panel-2", "panel-3", "panel-4", "panel-5"];
const makePanels = () => bgs.map(bg => ({ bg, wide: false }));

const panels = ref(makePanels());
const panels2 = ref(makePanels());
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  height: 120px;
  transition: width 0.3s;
}

.panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}
.panel-inner button {
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: inherit;
  border-radius: 4px;
}

.demo-hint {
  margin-top: 6px;
  font-size: 13px;
  color: #888;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
observePanelResize	boolean	false	패널 요소의 크기 변경을 ResizeObserver로 감지

의존 옵션

observePanelResize는 useResizeObserver가 true일 때만 동작합니다. useResizeObserver의 기본값이 true이므로 별도 설정 없이 사용할 수 있습니다.

값별 비교

값	동작	적합한 상황
false	뷰포트 크기 변경만 감지 (기본값)	패널 크기가 고정된 일반 캐러셀
true	패널별 크기 변경도 감지, 자동 재계산	동적 콘텐츠, 이미지 로드, 아코디언 패널

상세 설명

observePanelResize 동작 원리

기본적으로 Flicking의 autoResize는 뷰포트(컨테이너) 요소의 크기 변경만 감지합니다. 패널 내부 콘텐츠가 바뀌어 패널 자체의 크기가 달라지더라도 Flicking은 이를 알 수 없습니다.

observePanelResize: true로 설정하면 각 패널 요소에도 ResizeObserver가 연결됩니다. 패널 크기가 변경되는 즉시 beforeResize / afterResize 이벤트가 발생하고 레이아웃이 재계산됩니다.

const flicking = new Flicking("#el", {
  observePanelResize: true
  // useResizeObserver: true (기본값이므로 생략 가능)
});

사용 시나리오

언제 사용하나요?

• 이미지가 포함된 패널: 이미지 로드 완료 후 실제 크기로 패널이 커질 때
• 아코디언/토글 패널: 사용자 인터랙션으로 패널 높이가 변할 때
• 동적 콘텐츠: API 응답 후 패널 내 콘텐츠가 추가되어 크기가 변할 때
• adaptive: true와 함께: 뷰포트 높이가 활성 패널 높이에 맞춰 바뀌는 캐러셀에서 패널 내용이 동적으로 변할 때

성능 고려

observePanelResize: true는 모든 패널에 ResizeObserver를 연결하므로, 패널 수가 많을 때 약간의 오버헤드가 발생할 수 있습니다. 패널 크기가 고정된 일반 캐러셀에서는 기본값(false)을 유지하세요.

resizeOnContentsReady와의 차이

resizeOnContentsReady는 초기화 시 이미지/미디어 로드 완료를 한 번 기다리는 옵션입니다. observePanelResize는 초기화 이후에도 지속적으로 패널 크기를 관찰합니다. 용도가 다르므로 상황에 맞게 선택하세요.

관련 링크

관련 옵션

• useResizeObserver: ResizeObserver 사용 여부 (의존 옵션)
• autoResize: 뷰포트 크기 변경 시 자동 재계산
• resizeOnContentsReady: 초기 콘텐츠 로드 완료 후 리사이즈
• adaptive: 뷰포트 높이 자동 조절

관련 데모

• Adaptive: 뷰포트 높이 자동 조절
• Auto Resize: 리사이즈 감지 방식 설정
• Resize Debounce: 리사이즈 호출 빈도 제어