Skip to main content

Auto Init

The autoInit option controls whether init() is automatically called when a Flicking instance is created. Set it to false when deferred initialization is needed.

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

// autoInit: true (default)
new Flicking("#flick-auto", {
  autoInit: true,
  align: "center"
});

// autoInit: false (manual init)
const flickingManual = new Flicking("#flick-manual", {
  autoInit: false,
  align: "center"
});

let isInitialized = false;
const button = document.getElementById("init-btn");
const status = document.getElementById("init-status");

button.addEventListener("click", () => {
  if (!isInitialized) {
    flickingManual.init();
    isInitialized = true;
    button.textContent = "Initialized";
    button.disabled = true;
    status.textContent = "Status: initialized - drag enabled";
  }
});
Open on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
autoInitbooleantrueAutomatically call init() on creation
preventEventsBeforeInitbooleantruePrevent events from firing before init() is called

Comparison by Value​

ValueBehaviorSuitable For
trueInitializes immediately on instance creation (default)General usage
falseRequires manual init() callDeferred initialization, initializing after dynamically adding panels

Details​

How autoInit Works​

When autoInit: true, init() is automatically executed when new Flicking() is called. init() performs panel size calculation, event binding, initial position setup, and more.

// Automatic initialization (default)
const flicking = new Flicking("#el", { autoInit: true });
// Already initialized, ready to use

// Manual initialization
const flicking = new Flicking("#el", { autoInit: false });
// Not yet initialized, dragging disabled
flicking.init(); // Now initialized

State Before Initialization​

When created with autoInit: false, until init() is called:

  • Drag/touch input is ignored
  • Panel positions are not calculated
  • Event listeners are not bound

preventEventsBeforeInit​

This option is relevant when using deferred initialization with autoInit: false. When set to the default true, Flicking events such as ready, willChange, and changed will not fire until init() is called. This prevents event handlers from being unintentionally triggered before initialization.

If set to false, some events may fire before initialization, so it is recommended to keep the default unless there is a specific reason.

const flicking = new Flicking("#el", {
  autoInit: false,
  preventEventsBeforeInit: true // Default: prevent events before init()
});

flicking.on("ready", () => {
  console.log("Only runs after init() is called");
});

flicking.init(); // Events start being received from here

Use Cases​

When to use?
  • autoInit: true: Regular carousels, static panels
  • autoInit: false:
    • Creating panels after loading data from an API
    • Hidden Flicking inside tabs/modals
    • When initialization is needed after DOM dimensions are finalized

Notes​

Calling methods before initialization

Calling moveTo(), prev(), etc. while autoInit: false may cause errors. Make sure to call init() first.

Initializing hidden elements

Initializing while in display: none state may cause incorrect size calculations. Either call init() when the element is visible, or call resize() after it becomes visible.