Vertical

horizontal 옵션으로 패널의 이동 방향을 설정합니다. true이면 수평(좌우), false이면 수직(상하) 방향으로 이동합니다.

JavaScript

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

// horizontal: true (default)
new Flicking("#flick-horizontal", {
  horizontal: true,
  align: "prev",
  bound: true
});

// horizontal: false (vertical)
// In vanilla JS, you must add the "vertical" class
// to the flicking-viewport element manually.
// React and Vue wrappers add it automatically.
new Flicking("#flick-vertical", {
  horizontal: false,
  align: "prev",
  bound: true
});

Open Sandbox

React

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

const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];

export default function App() {
  return (
    <div>
      <div className="demo-container">
        <div className="demo-label">horizontal: true (default)</div>
        <Flicking horizontal={true} align="prev" bound={true}>
          {COLORS.map((color, i) => (
            <div key={i} className="flicking-panel" style={{ background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>

      <div className="demo-container">
        <div className="demo-label">horizontal: false (vertical)</div>
        <Flicking horizontal={false} align="prev" bound={true}>
          {COLORS.map((color, i) => (
            <div key={i} className="flicking-panel" style={{ background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <div class="demo-container">
      <div class="demo-label">horizontal: true (default)</div>
      <Flicking :options="{ horizontal: true, align: 'prev', bound: true }">
        <div
          v-for="(color, i) in colors"
          :key="'h-' + i"
          class="flicking-panel"
          :style="{ background: color }"
        >
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>

    <div class="demo-container">
      <div class="demo-label">horizontal: false (vertical)</div>
      <Flicking :options="{ horizontal: false, align: 'prev', bound: true }">
        <div
          v-for="(color, i) in colors"
          :key="'v-' + i"
          class="flicking-panel"
          :style="{ 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(["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"]);
</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 {
  height: 200px;
}

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

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

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

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
horizontal	boolean	true	패널 이동 방향 (true: 수평, false: 수직)

값별 비교

값	동작	적합한 상황
true	좌우로 드래그하여 패널 이동	일반 캐러셀, 이미지 갤러리, 배너 슬라이더
false	상하로 드래그하여 패널 이동	세로 카드 스택, 스토리 뷰어, 세로 온보딩

상세 설명

horizontal: true 상세

기본값입니다. 패널이 좌우로 배치되고, 사용자는 좌우 드래그로 패널을 이동합니다. 대부분의 캐러셀 UI에서 사용됩니다.

horizontal: false 상세

패널이 상하로 배치되고, 사용자는 상하 드래그로 패널을 이동합니다. 세로 스크롤 UI나 풀스크린 스토리 뷰어에 적합합니다.

중요: 수직 모드에서는 viewport에 고정 height를 반드시 설정해야 합니다. height가 없으면 패널이 보이지 않습니다.

.flicking-viewport {
  height: 300px; /* 수직 모드에서 필수 */
}

Vanilla JS 전용: viewport 요소에 vertical 클래스를 직접 추가해야 합니다. React, Vue 래퍼는 이 클래스를 자동으로 추가합니다.

<!-- Vanilla JS: "vertical" 클래스 필수 -->
<div id="my-flicking" class="flicking-viewport vertical">
  <div class="flicking-camera">
    <div class="panel">1</div>
    <div class="panel">2</div>
  </div>
</div>

이 클래스가 카메라의 flex-direction을 column으로 변경하여 수직 패널 배치를 활성화합니다.

연관 옵션

• adaptive와의 관계: adaptive 옵션은 horizontal: true일 때만 동작합니다. 수직 모드에서는 효과가 없습니다.
• nested와의 관계: 부모와 자식 Flicking의 horizontal 값이 다르면 nested 옵션 없이도 자연스럽게 동작합니다.
• inputType과의 관계: 기본 inputType ["mouse", "touch"]는 수평/수직 모두 지원합니다.

사용 시나리오

언제 사용하나요?

• horizontal: true: 이미지 갤러리, 제품 슬라이더, 배너, 탭 형태 UI
• horizontal: false: TikTok/Instagram 스토리 스타일, 세로 카드 스택, 풀스크린 온보딩

주의사항

수직 모드에서 viewport height 필수

horizontal: false로 설정할 때 viewport에 고정 height를 지정하지 않으면 패널이 표시되지 않습니다. CSS에서 height 값을 반드시 설정하세요.

터치 디바이스에서 스크롤 충돌

수직 모드에서 상하 드래그는 페이지 스크롤과 충돌할 수 있습니다. 필요시 preventDefaultOnDrag 옵션이나 CSS touch-action 설정을 검토하세요.

관련 링크

관련 옵션

• adaptive: 패널 높이에 viewport 맞춤 (horizontal: true 전용)
• nested: 중첩 Flicking 동작
• inputType: 입력 타입 설정

관련 데모

• Nested: 중첩 Flicking (방향이 다르면 nested 불필요)
• Adaptive: 패널 높이 적응