Fractional Size

Use the useFractionalSize option to prevent 1px misalignment errors in panels with fractional sizes.

JavaScript

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

new Flicking("#flick-false", {
  defaultIndex: 2,
  useFractionalSize: false
});

new Flicking("#flick-true", {
  defaultIndex: 2,
  useFractionalSize: true
});

Open Sandbox

React

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

const COLORS = ["#3e8ed0", "#00d1b2", "#48c78e", "#f14668", "#ffe08a"];

export default function App() {
  return (
    <div>
      <div className="demo-container">
        <div className="demo-label">useFractionalSize: false (default)</div>
        <Flicking useFractionalSize={false} defaultIndex={2} style={{ width: "200px" }}>
          {COLORS.map((color, i) => (
            <div key={i} className="flicking-panel" style={{ width: "199.5px", height: "200px", background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>

      <div className="demo-container">
        <div className="demo-label">useFractionalSize: true</div>
        <Flicking useFractionalSize={true} defaultIndex={2} style={{ width: "200px" }}>
          {COLORS.map((color, i) => (
            <div key={i} className="flicking-panel" style={{ width: "199.5px", height: "200px", background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <div class="demo-container">
      <div class="demo-label">useFractionalSize: false (default)</div>
      <Flicking :options="{ useFractionalSize: false, defaultIndex: 2 }" :style="{ width: '200px' }">
        <div
          v-for="(color, i) in colors"
          :key="'false-' + i"
          class="flicking-panel"
          :style="{ width: '199.5px', height: '200px', background: color }"
        >
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>

    <div class="demo-container">
      <div class="demo-label">useFractionalSize: true</div>
      <Flicking :options="{ useFractionalSize: true, defaultIndex: 2 }" :style="{ width: '200px' }">
        <div
          v-for="(color, i) in colors"
          :key="'true-' + i"
          class="flicking-panel"
          :style="{ width: '199.5px', height: '200px', background: color }"
        >
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>
  </div>
</template>

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

const colors = ref(["#3e8ed0", "#00d1b2", "#48c78e", "#f14668", "#ffe08a"]);
</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-viewport {
  margin: 0 auto 8px;
}

.flicking-panel {
  margin-right: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

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

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

</style>

Open Sandbox

Summary

Key Options

Option	Type	Default	Description
useFractionalSize	boolean	false	Calculate sizes with fractional precision

Mode Comparison

Setting	Size Measurement Method	Precision	Performance
false (default)	offsetWidth / clientWidth	Integer (rounded)	Fast
true	parseFloat(computedStyle.width)	Fractional	Slightly slower

Details

The 1px Misalignment Problem

When panel width is fractional (e.g., 199.5px in a 200px viewport), offsetWidth rounds it to 200px.
Flicking uses that rounded value for snap position calculations, so panels gradually drift from their actual CSS position.

Viewport: 200px, Panel: 199.5px, defaultIndex: 2

offsetWidth (integer):
  Panel size = 200px (rounded from 199.5)
  Panel 2 position = 2 × 200 = 400px   ← 1px off from actual 399px

computedStyle (fractional):
  Panel size = 199.5px (precise)
  Panel 2 position = 2 × 199.5 = 399px ← correct

The error grows with index: panel 4 is off by 2px, panel 6 by 3px, and so on.

How It Works

// false (default): uses offsetWidth (integer)
const width = panel.offsetWidth; // 200 (rounded from 199.5)

// true: uses parseFloat(computedStyle.width) (fractional)
const width = parseFloat(getComputedStyle(panel).width); // 199.5 (precise)

Setting useFractionalSize: true makes Flicking internally calculate sizes with fractional precision.

Use Cases

When should you use useFractionalSize?

Recommended:

• When panel width is set in % units (33.33%, 16.66%, etc.)
• When panel alignment is slightly off
• When precise rendering is needed on high-resolution displays

Not necessary:

• When panel width is an integer px (200px, 300px, etc.)
• When minor alignment errors are not a concern
• When performance is a priority

Notes

Performance Consideration

parseFloat(computedStyle.width) is slightly slower than offsetWidth. Consider the performance impact when there are many panels or frequent resizes occur.

Related Links

Related Options

• autoResize: Auto resize
• useResizeObserver: Whether to use ResizeObserver