Skip to main content

CSS Order

Use the useCSSOrder option to control how panel visual order is managed in circular mode. The default (false) directly changes the DOM node order, while setting it to true uses the CSS order property to keep DOM order unchanged.

After cycling through panels, check how the "DOM Order" display below differs.

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

function updateDomOrder(flicking, labelEl) {
  const camera = flicking.camera.element;
  const ids = [...camera.children].map(el => el.dataset.id).join(" → ");
  labelEl.textContent = `DOM order: ${ids}`;
}

// useCSSOrder: false (default)
const flick1 = new Flicking("#flick-default", {
  circular: true,
  useCSSOrder: false,
  align: "center"
});

const log1 = document.getElementById("log1");
const update1 = () => updateDomOrder(flick1, log1);
flick1.on("ready", update1);
flick1.on("moveEnd", update1);

document.getElementById("prev1").addEventListener("click", () => flick1.prev().catch(() => {}));
document.getElementById("next1").addEventListener("click", () => flick1.next().catch(() => {}));

// useCSSOrder: true
const flick2 = new Flicking("#flick-cssorder", {
  circular: true,
  useCSSOrder: true,
  align: "center"
});

const log2 = document.getElementById("log2");
const update2 = () => updateDomOrder(flick2, log2);
flick2.on("ready", update2);
flick2.on("moveEnd", update2);

document.getElementById("prev2").addEventListener("click", () => flick2.prev().catch(() => {}));
document.getElementById("next2").addEventListener("click", () => flick2.next().catch(() => {}));
Open on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
useCSSOrderbooleanfalseManage panel order via CSS order property

Value Comparison​

ValueBehaviorBest For
falseDirectly rearranges DOM nodes during circular cycling (default)Typical carousels
trueKeeps DOM order fixed, adjusts visual order via CSS order propertyPanels with iframe, video, or state that needs to be preserved

Details​

How useCSSOrder Works​

A Flicking with circular: true rearranges panels to create the looping effect.

useCSSOrder: false (default): Physically moves panel DOM nodes to change their order. This is fine for simple div panels, but panels containing elements like <iframe> or <video> that reload on DOM movement will have their content reset on every cycle.

useCSSOrder: true: Keeps DOM nodes in their original position and only changes the visual order using the CSS flexbox order property. Since there is no DOM rearrangement, iframes and videos are not reloaded.

// Circular carousel with iframe panels
const flicking = new Flicking("#el", {
  circular: true,
  useCSSOrder: true  // Manage via CSS order without DOM rearrangement
});
Svelte always uses useCSSOrder

When using the Svelte binding, useCSSOrder: true is always applied internally. This is because Svelte's rendering approach conflicts with DOM rearrangement.

Notes​

CSS order and flexbox

useCSSOrder: true works under the assumption that Flicking's camera element (flicking-camera) uses a flexbox layout. If you remove flexbox with custom CSS, the order may not be applied correctly.

When not circular

If circular: false, panel rearrangement does not occur, so the useCSSOrder option has no effect.