Skip to main content

Resize On Contents Ready

Use the resizeOnContentsReady option to automatically recalculate panel size and position after images/videos have loaded.

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

const t = Date.now();
const HEIGHTS_WIDTHS = [
  [300, 150],
  [200, 150],
  [400, 150],
  [250, 150]
];

// Set image src before Flicking init, so resizeOnContentsReady can detect them
document.querySelectorAll("#flick-auto .flicking-panel img").forEach((img, i) => {
  img.src = `https://picsum.photos/${HEIGHTS_WIDTHS[i][0]}/${HEIGHTS_WIDTHS[i][1]}?t=${t}&r=${i + 1}`;
});
document.querySelectorAll("#flick-manual .flicking-panel img").forEach((img, i) => {
  img.src = `https://picsum.photos/${HEIGHTS_WIDTHS[i][0]}/${HEIGHTS_WIDTHS[i][1]}?t=${t}&r=${i + 5}`;
});

const autoFlicking = new Flicking("#flick-auto", {
  align: "prev",
  resizeOnContentsReady: true,
  preventDefaultOnDrag: true,
  bound: true
});

const manualFlicking = new Flicking("#flick-manual", {
  align: "prev",
  resizeOnContentsReady: false,
  preventDefaultOnDrag: true,
  bound: true
});

function updateSizes() {
  setTimeout(() => {
    try {
      document.getElementById("auto-sizes").textContent = autoFlicking.panels.map(p => Math.round(p.size)).join(", ");
      document.getElementById("manual-sizes").textContent = manualFlicking.panels
        .map(p => Math.round(p.size))
        .join(", ");
    } catch (_e) {
      /* ignore */
    }
  }, 500);
}

autoFlicking.on("ready", updateSizes);
manualFlicking.on("ready", updateSizes);

document.querySelectorAll("#flick-auto img").forEach(img => {
  img.addEventListener("load", updateSizes);
});
document.querySelectorAll("#flick-manual img").forEach(img => {
  img.addEventListener("load", updateSizes);
});

document.querySelectorAll(".move-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    const idx = parseInt(btn.dataset.index, 10);
    autoFlicking.moveTo(idx, 500).catch(() => {});
    manualFlicking.moveTo(idx, 500).catch(() => {});
  });
});
Open on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
resizeOnContentsReadybooleanfalseAutomatically recalculate panel size when content loads

Mode Comparison​

resizeOnContentsReadyBehavior After Image Load
falseFlicking's internal panel size stays as it was at initialization — scroll range and snap positions become misaligned
truePanel size is recalculated — scroll range and snap positions are correct

Details​

How It Works​

  1. Panel sizes are calculated at Flicking initialization
  2. Images/videos have not loaded yet, so sizes are 0 or placeholder size
  3. After image load completes, the actual size changes
  4. With resizeOnContentsReady: true, panel sizes are automatically recalculated and positions updated via @egjs/imready
<Flicking
  resizeOnContentsReady={true}
>
  <div className="panel">
    <img src="image.jpg" /> {/* Panel size automatically recalculated when load completes */}
  </div>
</Flicking>

What Gets Recalculated​

When resizeOnContentsReady detects image/video load, the following are updated:

  • Panel size (panel.resize())
  • Subsequent panel positions (updatePosition())
  • Camera scroll range (camera.updateRange())
  • Snap points (camera.updateAnchors())

Detected Content Types​

Load events are detected for the following elements within panels:

  • <img> images
  • <video> videos

Use Cases​

When should you use resizeOnContentsReady?

Recommended:

  • When panel size depends on images/videos
  • When panel size is not pre-fixed with CSS
  • When loading images from the network

Not necessary:

  • When panel size is pre-fixed with CSS (e.g., width: 200px)
  • Text-only panels
  • When images are included as base64 inline

Manual resize Alternative​

When resizeOnContentsReady: false, you can manually call resize:

// Manual resize after image load completes
img.addEventListener("load", () => {
  flicking.resize();
});
  • resize: Manual layout recalculation