Auto Init

autoInit 옵션으로 Flicking 인스턴스 생성 시 자동으로 init()을 호출할지 설정합니다. 지연 초기화가 필요한 경우 false로 설정합니다.

JavaScript

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 Sandbox

React

import Flicking from "@egjs/react-flicking";
import { useRef, useState } from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

export default function App() {
  const flickingRef = useRef(null);
  const [isInitialized, setIsInitialized] = useState(false);

  const handleInit = () => {
    if (flickingRef.current && !isInitialized) {
      flickingRef.current.init();
      setIsInitialized(true);
    }
  };

  return (
    <div>
      {/* autoInit: true (default) */}
      <div className="demo-container">
        <div className="demo-label">autoInit: true (default, initializes immediately)</div>
        <Flicking autoInit={true} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>

      {/* autoInit: false (manual init) */}
      <div className="demo-container">
        <div className="demo-label">autoInit: false (initialize on button click)</div>
        <Flicking ref={flickingRef} autoInit={false} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
        <div className="controls">
          <button onClick={handleInit} disabled={isInitialized}>
            {isInitialized ? "Initialized" : "Call init()"}
          </button>
        </div>
        <div className="status">
          Status: {isInitialized ? "initialized - drag enabled" : "not initialized - drag disabled"}
        </div>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- autoInit: true (default) -->
    <div class="demo-container">
      <div class="demo-label">autoInit: true (default, initializes immediately)</div>
      <Flicking :options="{ autoInit: true, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>

    <!-- autoInit: false (manual init) -->
    <div class="demo-container">
      <div class="demo-label">autoInit: false (initialize on button click)</div>
      <Flicking ref="flicking" :options="{ autoInit: false, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
      <div class="controls">
        <button @click="handleInit" :disabled="isInitialized">
          {{ isInitialized ? "Initialized" : "Call init()" }}
        </button>
      </div>
      <div class="status">
        Status: {{ isInitialized ? "initialized - drag enabled" : "not initialized - drag disabled" }}
      </div>
    </div>
  </div>
</template>

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

const flicking = ref(null);
const isInitialized = ref(false);

const handleInit = () => {
  if (!isInitialized.value) {
    flicking.value.init();
    isInitialized.value = true;
  }
};
</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-panel {
  width: 50%;
  height: 120px;
}

.controls {
  margin-top: 8px;
}
.controls button {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.status {
  margin-top: 4px;
  font-size: 14px;
  color: #888;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
autoInit	boolean	true	생성 시 자동 init() 호출
preventEventsBeforeInit	boolean	true	init() 호출 전 이벤트 발생 방지

값별 비교

값	동작	적합한 상황
true	인스턴스 생성 즉시 초기화 (기본값)	일반적인 사용
false	수동으로 init() 호출 필요	지연 초기화, 동적 패널 추가 후 초기화

상세 설명

autoInit 동작 원리

autoInit: true이면 new Flicking() 호출 시 자동으로 init()이 실행됩니다. init()은 패널 크기 계산, 이벤트 바인딩, 초기 위치 설정 등을 수행합니다.

// 자동 초기화 (기본값)
const flicking = new Flicking("#el", { autoInit: true });
// 이미 초기화됨, 바로 사용 가능

// 수동 초기화
const flicking = new Flicking("#el", { autoInit: false });
// 아직 초기화 안 됨, 드래그 불가
flicking.init(); // 이제 초기화됨

초기화 전 상태

autoInit: false로 생성하면 init() 호출 전까지:

• 드래그/터치 입력 무시
• 패널 위치 계산 안 됨
• 이벤트 리스너 바인딩 안 됨

preventEventsBeforeInit

autoInit: false로 지연 초기화를 사용할 때 관련 있는 옵션입니다. 기본값 true이면 init() 호출 전까지 ready, willChange, changed 등 Flicking 이벤트가 발생하지 않습니다. 초기화 전에 이벤트 핸들러가 의도치 않게 실행되는 것을 방지합니다.

false로 설정하면 초기화 전에도 일부 이벤트가 발생할 수 있으므로, 특별한 이유가 없다면 기본값을 유지하는 것을 권장합니다.

const flicking = new Flicking("#el", {
  autoInit: false,
  preventEventsBeforeInit: true // 기본값: init() 전 이벤트 방지
});

flicking.on("ready", () => {
  console.log("init() 호출 후에만 실행됨");
});

flicking.init(); // 여기서부터 이벤트 수신 시작

사용 시나리오

언제 사용하나요?

• autoInit: true: 일반적인 캐러셀, 정적 패널
• autoInit: false:
  • API에서 데이터 로드 후 패널 생성
  • 탭/모달 내부의 숨겨진 Flicking
  • DOM 크기가 확정된 후 초기화 필요

주의사항

초기화 전 메서드 호출

autoInit: false 상태에서 moveTo(), prev() 등을 호출하면 오류가 발생할 수 있습니다. 반드시 init() 호출 후 사용하세요.

숨겨진 요소에서의 초기화

display: none 상태에서 초기화하면 크기 계산이 잘못될 수 있습니다. 요소가 보이는 상태에서 init()을 호출하거나, 표시 후 resize()를 호출하세요.

관련 링크

관련 옵션

• defaultIndex: 초기 패널 인덱스
• preventEventsBeforeInit: init() 전 이벤트 발생 방지

관련 데모

• Default Index: 초기 패널 설정