Adaptive

adaptive 옵션으로 패널 이동 후 활성 패널의 높이에 맞춰 viewport 높이를 자동 조정합니다. 다양한 높이의 콘텐츠를 가진 캐러셀에 유용합니다.

JavaScript

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

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

// adaptive: true
new Flicking("#flick-adaptive", {
  adaptive: true,
  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>
      {/* adaptive: false (default) */}
      <div className="demo-container">
        <div className="demo-label">adaptive: false (default, fixed height)</div>
        <Flicking adaptive={false} align="center">
          <div className="flicking-panel panel-1">Height 80px</div>
          <div className="flicking-panel panel-2">Height 150px</div>
          <div className="flicking-panel panel-3">Height 100px</div>
          <div className="flicking-panel panel-4">Height 200px</div>
          <div className="flicking-panel panel-5">Height 120px</div>
        </Flicking>
      </div>

      {/* adaptive: true */}
      <div className="demo-container">
        <div className="demo-label">adaptive: true (viewport adjusts to panel height)</div>
        <Flicking adaptive={true} align="center">
          <div className="flicking-panel panel-1">Height 80px</div>
          <div className="flicking-panel panel-2">Height 150px</div>
          <div className="flicking-panel panel-3">Height 100px</div>
          <div className="flicking-panel panel-4">Height 200px</div>
          <div className="flicking-panel panel-5">Height 120px</div>
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- adaptive: false (default) -->
    <div class="demo-container">
      <div class="demo-label">adaptive: false (default, fixed height)</div>
      <Flicking :options="{ adaptive: false, align: 'center' }">
        <div class="flicking-panel panel-1">Height 80px</div>
        <div class="flicking-panel panel-2">Height 150px</div>
        <div class="flicking-panel panel-3">Height 100px</div>
        <div class="flicking-panel panel-4">Height 200px</div>
        <div class="flicking-panel panel-5">Height 120px</div>
      </Flicking>
    </div>

    <!-- adaptive: true -->
    <div class="demo-container">
      <div class="demo-label">adaptive: true (viewport adjusts to panel height)</div>
      <Flicking :options="{ adaptive: true, align: 'center' }">
        <div class="flicking-panel panel-1">Height 80px</div>
        <div class="flicking-panel panel-2">Height 150px</div>
        <div class="flicking-panel panel-3">Height 100px</div>
        <div class="flicking-panel panel-4">Height 200px</div>
        <div class="flicking-panel panel-5">Height 120px</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-viewport {
  border: 2px solid #ddd;
  transition: height 0.3s;
}
.flicking-panel {
  width: 80%;
}
/* each panel has a different height */
.panel-1 {
  background: #3e8ed0;
  height: 80px;
}
.panel-2 {
  background: #00d1b2;
  height: 150px;
}
.panel-3 {
  background: #f14668;
  height: 100px;
}
.panel-4 {
  background: #ffe08a;
  color: #333;
  height: 200px;
}
.panel-5 {
  background: #48c78e;
  height: 120px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
adaptive	boolean	false	패널 높이에 맞춰 viewport 높이 자동 조정

값별 비교

값	동작	적합한 상황
false	viewport 높이 고정 (기본값)	동일한 높이의 패널, 고정 레이아웃
true	활성 패널 높이에 맞춰 viewport 조정	다양한 높이의 카드, 가변 콘텐츠

상세 설명

adaptive 동작 원리

adaptive: true이면 패널이 전환될 때마다 현재 활성 패널의 높이로 viewport 높이가 업데이트됩니다.

/* 부드러운 높이 변화를 위한 CSS */
.flicking-viewport {
  transition: height 0.3s;
}

연관 옵션

• horizontal과의 관계: adaptive는 horizontal: true(수평 모드)에서만 동작합니다. 수직 모드에서는 효과가 없습니다.

사용 시나리오

언제 사용하나요?

• adaptive: false: 이미지 갤러리, 동일한 크기의 카드
• adaptive: true: 다양한 길이의 텍스트 카드, 상품 설명, FAQ 아코디언 스타일

주의사항

수평 모드 전용

adaptive는 horizontal: true일 때만 동작합니다. horizontal: false(수직 모드)에서는 효과가 없습니다.

레이아웃 시프트

높이가 크게 변하면 아래 콘텐츠가 밀려나는 레이아웃 시프트가 발생합니다. CSS transition으로 부드럽게 처리하거나, 최소 높이를 설정하는 것을 권장합니다.

관련 링크

관련 옵션

• horizontal: 수평/수직 방향 (adaptive는 수평 전용)

관련 데모

• Vertical: 수직 모드 (adaptive 미지원)