Skip to main content

Auto Resize

Control how viewport size changes are detected using the autoResize and useResizeObserver options.

Try changing the container width with the slider and compare the resize response difference between the two carousels.

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

Summary​

Key Options​

OptionTypeDefaultDescription
autoResizebooleantrueAutomatically call resize() when viewport size changes
useResizeObserverbooleantrueWhether to use ResizeObserver (falls back to window resize if false)

Option Combination Comparison​

CombinationBehaviorBest For
autoResize: true + useResizeObserver: trueImmediately detects element size changesGeneral use (default)
autoResize: true + useResizeObserver: falseOnly detects window resizeElement size is fixed, only window size changes
autoResize: falseManual resize() call requiredWhen you want to control the resize timing yourself

Details​

autoResize​

When autoResize: true (default), Flicking automatically calls the resize() method when the viewport size changes. Setting it to false requires the developer to manually call flicking.resize().

useResizeObserver​

When useResizeObserver: true (default), the ResizeObserver API is used to detect element-level size changes. When false, only the window's resize event is detected, which means changes to the parent element size may not be detected.

Use Cases​

When should you use this?
  • Responsive layouts: Use the defaults as-is (autoResize + ResizeObserver)
  • Tab switching UI: Set autoResize: false and manually resize only when the tab is activated
  • Performance-sensitive environments: Set useResizeObserver: false to only detect window resize

Notes​

Caution
  • When autoResize: false is set, you must call resize() after the viewport size changes
  • When useResizeObserver: false, size changes caused by CSS layout changes (flex, grid, etc.) are not detected