Input Type

inputType 옵션으로 활성화할 입력 장치 타입을 배열로 설정합니다. 특정 입력 장치만 허용하거나 제한할 수 있습니다.

JavaScript

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

// inputType: ["touch", "mouse"] (default)
new Flicking("#flick-both", {
  inputType: ["touch", "mouse"],
  align: "center"
});

// inputType: ["touch"]
new Flicking("#flick-touch", {
  inputType: ["touch"],
  align: "center"
});

// inputType: ["mouse"]
new Flicking("#flick-mouse", {
  inputType: ["mouse"],
  align: "center"
});

Open Sandbox

React

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

export default function App() {
  return (
    <div>
      {/* inputType: ["touch", "mouse"] (default) */}
      <div className="demo-container">
        <div className="demo-label">inputType: ["touch", "mouse"] (default)</div>
        <Flicking inputType={["touch", "mouse"]} 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>

      {/* inputType: ["touch"] */}
      <div className="demo-container">
        <div className="demo-label">inputType: ["touch"] (touch only, no mouse drag)</div>
        <Flicking inputType={["touch"]} 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>

      {/* inputType: ["mouse"] */}
      <div className="demo-container">
        <div className="demo-label">inputType: ["mouse"] (mouse only, no touch)</div>
        <Flicking inputType={["mouse"]} 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>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- inputType: ["touch", "mouse"] (default) -->
    <div class="demo-container">
      <div class="demo-label">inputType: ["touch", "mouse"] (default)</div>
      <Flicking :options="{ inputType: ['touch', 'mouse'], 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>

    <!-- inputType: ["touch"] -->
    <div class="demo-container">
      <div class="demo-label">inputType: ["touch"] (touch only, no mouse drag)</div>
      <Flicking :options="{ inputType: ['touch'], 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>

    <!-- inputType: ["mouse"] -->
    <div class="demo-container">
      <div class="demo-label">inputType: ["mouse"] (mouse only, no touch)</div>
      <Flicking :options="{ inputType: ['mouse'], 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>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";
</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;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
inputType	string[]	["touch", "mouse"]	활성화할 입력 장치 타입

값별 비교

값	동작	적합한 상황
["touch", "mouse"]	터치와 마우스 모두 허용 (기본값)	일반적인 사용, 크로스 플랫폼
["touch"]	터치만 허용, 마우스 드래그 무시	터치 전용 UI, 마우스 드래그 방지
["mouse"]	마우스만 허용, 터치 무시	데스크톱 전용 UI

상세 설명

inputType 동작 원리

배열에 포함된 입력 타입만 Flicking 조작에 사용됩니다. 포함되지 않은 입력 타입은 무시됩니다.

// 모든 입력 허용 (기본값)
inputType: ["touch", "mouse"]

// 터치만 허용
inputType: ["touch"]

// 마우스만 허용
inputType: ["mouse"]

// 모든 입력 비활성화
inputType: []

지원되는 입력 타입

• "touch": 터치스크린 입력 (스마트폰, 태블릿)
• "mouse": 마우스 드래그 입력 (데스크톱)

iOSEdgeSwipeThreshold

iOS Safari에서는 화면 가장자리를 스와이프하면 브라우저의 뒤로가기/앞으로가기 제스처가 발동됩니다. iOSEdgeSwipeThreshold 옵션으로 이 영역의 너비(px)를 지정하면, 해당 범위 내에서 시작된 터치는 Flicking이 처리하지 않고 브라우저에 넘겨줍니다.

const flicking = new Flicking("#el", {
  inputType: ["touch", "mouse"],
  iOSEdgeSwipeThreshold: 30 // 기본값: 좌우 각 30px 영역은 브라우저 제스처에 양보
});

iOS 환경에서만 적용

iOSEdgeSwipeThreshold는 iOS 기기에서만 동작합니다. 일반적으로 기본값(30px)으로 충분하며, 전체 화면 가로 슬라이더처럼 가장자리 패널을 자주 드래그하는 UI에서는 값을 줄이거나 0으로 설정할 수 있습니다.

연관 옵션

• disableOnInit과의 관계: disableOnInit: true는 모든 입력을 비활성화하지만, inputType: []도 동일한 효과를 냅니다. 차이점은 disableOnInit은 나중에 enable()로 활성화할 수 있습니다.

사용 시나리오

언제 사용하나요?

• ["touch", "mouse"]: 일반적인 웹 앱, 다양한 디바이스 지원
• ["touch"]: 모바일 전용 UI, 데스크톱에서 버튼/화살표로만 제어하고 싶을 때
• ["mouse"]: 데스크톱 전용 앱, 터치 입력이 다른 용도로 사용될 때

주의사항

입력 제한 시 대안 제공

특정 입력 타입을 제한하면 해당 디바이스 사용자가 조작할 수 없습니다. 네비게이션 버튼이나 키보드 제어 등 대안을 함께 제공하세요.

접근성 고려

일반적으로 기본값 ["touch", "mouse"]를 사용하는 것이 접근성 측면에서 권장됩니다. 특별한 이유가 없다면 입력 타입을 제한하지 마세요.

관련 링크

관련 옵션

• disableOnInit: 초기 입력 비활성화
• iOSEdgeSwipeThreshold: iOS 가장자리 스와이프 제외 영역 너비

관련 데모

• Disable Input: 입력 비활성화