Fractional Size

useFractionalSize 옵션으로 소수점 크기의 패널에서 발생하는 1px 오차를 방지합니다.

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

요약

주요 옵션

옵션	타입	기본값	설명
useFractionalSize	boolean	false	소수점 정밀도로 크기 계산

모드별 비교

설정	크기 측정 방식	정밀도	성능
false (기본값)	offsetWidth / clientWidth	정수 (반올림)	빠름
true	parseFloat(computedStyle.width)	소수점	약간 느림

상세 설명

1px 오차 문제

패널 너비가 소수점일 때 (예: 200px 뷰포트에서 199.5px 패널), offsetWidth가 200px으로 반올림합니다.
Flicking은 이 반올림된 값으로 스냅 위치를 계산하므로, 패널이 실제 CSS 위치에서 점점 어긋납니다.

뷰포트: 200px, 패널: 199.5px, defaultIndex: 2

offsetWidth (정수):
  패널 크기 = 200px (199.5에서 반올림)
  패널 2 위치 = 2 × 200 = 400px   ← 실제 399px에서 1px 오차

computedStyle (소수점):
  패널 크기 = 199.5px (정확)
  패널 2 위치 = 2 × 199.5 = 399px ← 정확

오차는 인덱스에 비례하여 증가합니다: 패널 4는 2px, 패널 6은 3px 어긋납니다.

동작 원리

// false (기본값): offsetWidth 사용 (정수)
const width = panel.offsetWidth; // 200 (199.5에서 반올림)

// true: parseFloat(computedStyle.width) 사용 (소수점)
const width = parseFloat(getComputedStyle(panel).width); // 199.5 (정확)

useFractionalSize: true를 설정하면 Flicking이 내부적으로 소수점 정밀도로 크기를 계산합니다.

사용 시나리오

언제 useFractionalSize를 사용하나요?

사용 권장:

• 패널 너비를 % 단위로 설정한 경우 (33.33%, 16.66% 등)
• 패널 정렬이 미세하게 어긋나는 경우
• 고해상도 디스플레이에서 정밀한 렌더링이 필요한 경우

사용하지 않아도 되는 경우:

• 패널 너비가 정수 px인 경우 (200px, 300px 등)
• 미세한 정렬 오차가 문제되지 않는 경우
• 성능이 중요한 경우

주의사항

성능 고려

parseFloat(computedStyle.width)는 offsetWidth보다 약간 느립니다. 패널 수가 매우 많거나 빈번한 리사이즈가 발생하는 경우 성능 영향을 고려하세요.

관련 링크

관련 옵션

• autoResize: 자동 리사이즈
• useResizeObserver: ResizeObserver 사용 여부