Disable Input

disableOnInit 옵션으로 초기화 시 사용자 입력(드래그)을 비활성화합니다. 버튼이나 API로만 제어하는 캐러셀에 유용합니다.

JavaScript

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

// disableOnInit: false (default)
new Flicking("#flick-enabled", {
  disableOnInit: false,
  align: "center"
});

// disableOnInit: true
new Flicking("#flick-disabled", {
  disableOnInit: true,
  align: "center"
});

// dynamic toggle
const flickingToggle = new Flicking("#flick-toggle", {
  align: "center"
});

let isDisabled = false;
const button = document.getElementById("toggle-btn");
const label = document.getElementById("toggle-label");

button.addEventListener("click", () => {
  if (isDisabled) {
    flickingToggle.enableInput();
    button.textContent = "Disable input";
    label.textContent = "Dynamic toggle: enabled";
  } else {
    flickingToggle.disableInput();
    button.textContent = "Enable input";
    label.textContent = "Dynamic toggle: disabled";
  }
  isDisabled = !isDisabled;
});

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 [isDisabled, setIsDisabled] = useState(false);

  const toggleInput = () => {
    if (flickingRef.current) {
      if (isDisabled) {
        flickingRef.current.enableInput();
      } else {
        flickingRef.current.disableInput();
      }
      setIsDisabled(!isDisabled);
    }
  };

  return (
    <div>
      {/* disableOnInit: false (default) */}
      <div className="demo-container">
        <div className="demo-label">disableOnInit: false (default, drag enabled)</div>
        <Flicking disableOnInit={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>

      {/* disableOnInit: true */}
      <div className="demo-container">
        <div className="demo-label">disableOnInit: true (drag disabled, button control only)</div>
        <Flicking disableOnInit={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>

      {/* dynamic toggle */}
      <div className="demo-container">
        <div className="demo-label">Dynamic toggle: {isDisabled ? "disabled" : "enabled"}</div>
        <Flicking ref={flickingRef} 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={toggleInput}>{isDisabled ? "Enable input" : "Disable input"}</button>
        </div>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- disableOnInit: false (default) -->
    <div class="demo-container">
      <div class="demo-label">disableOnInit: false (default, drag enabled)</div>
      <Flicking :options="{ disableOnInit: 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>

    <!-- disableOnInit: true -->
    <div class="demo-container">
      <div class="demo-label">disableOnInit: true (drag disabled, button control only)</div>
      <Flicking :options="{ disableOnInit: 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>

    <!-- dynamic toggle -->
    <div class="demo-container">
      <div class="demo-label">Dynamic toggle: {{ isDisabled ? "disabled" : "enabled" }}</div>
      <Flicking ref="flicking" :options="{ 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="toggleInput">
          {{ isDisabled ? "Enable input" : "Disable input" }}
        </button>
      </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 isDisabled = ref(false);

const toggleInput = () => {
  const flickingInstance = flicking.value;
  if (isDisabled.value) {
    flickingInstance.enableInput();
  } else {
    flickingInstance.disableInput();
  }
  isDisabled.value = !isDisabled.value;
};
</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;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
disableOnInit	boolean	false	초기화 시 입력 비활성화

값별 비교

값	동작	적합한 상황
false	드래그로 패널 이동 가능 (기본값)	일반적인 캐러셀
true	드래그 무시, API로만 제어 가능	자동 재생 슬라이더, 버튼 제어 전용

상세 설명

disableOnInit 동작 원리

disableOnInit: true로 설정하면 초기화 시 자동으로 disableInput() 메서드가 호출됩니다. 이후 사용자 드래그 입력은 무시되지만, moveTo(), prev(), next() 등 프로그래매틱 제어는 정상 동작합니다.

동적 제어 메서드

런타임에 입력 활성화 상태를 변경할 수 있습니다.

const flicking = new Flicking("#el");

// 입력 비활성화
flicking.disableInput();

// 입력 활성화
flicking.enableInput();

연관 옵션

• inputType과의 관계: inputType: []도 입력을 비활성화하지만, disableOnInit은 나중에 enableInput()으로 활성화할 수 있습니다.

사용 시나리오

언제 사용하나요?

• disableOnInit: true: 자동 재생 캐러셀, 버튼/화살표로만 제어하는 UI, 터치 방지가 필요한 프레젠테이션
• 동적 토글: 특정 조건에서만 드래그 허용, 모달 열림 시 배경 캐러셀 비활성화

주의사항

대안 제어 수단 제공

disableOnInit: true로 설정하면 드래그가 불가능합니다. 네비게이션 버튼, 화살표, 또는 키보드 제어 등 대안을 반드시 제공하세요.

관련 링크

관련 옵션

• inputType: 입력 장치 타입 제한

관련 데모

• Input Type: 입력 장치 타입 설정