Default Index

defaultIndex 옵션으로 초기화 시 표시할 패널의 인덱스를 설정합니다. 0-based 인덱스로 지정합니다.

JavaScript

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

// defaultIndex: 0 (default)
new Flicking("#flick-first", {
  defaultIndex: 0,
  align: "center"
});

// defaultIndex: 2
new Flicking("#flick-middle", {
  defaultIndex: 2,
  align: "center"
});

// defaultIndex: 4 (last)
new Flicking("#flick-last", {
  defaultIndex: 4,
  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>
      {/* defaultIndex: 0 (default) */}
      <div className="demo-container">
        <div className="demo-label">defaultIndex: 0 (default, first panel)</div>
        <Flicking defaultIndex={0} 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>

      {/* defaultIndex: 2 */}
      <div className="demo-container">
        <div className="demo-label">defaultIndex: 2 (starts at 3rd panel)</div>
        <Flicking defaultIndex={2} 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>

      {/* defaultIndex: 4 (last) */}
      <div className="demo-container">
        <div className="demo-label">defaultIndex: 4 (starts at last panel)</div>
        <Flicking defaultIndex={4} 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>
    <!-- defaultIndex: 0 (default) -->
    <div class="demo-container">
      <div class="demo-label">defaultIndex: 0 (default, first panel)</div>
      <Flicking :options="{ defaultIndex: 0, 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>

    <!-- defaultIndex: 2 -->
    <div class="demo-container">
      <div class="demo-label">defaultIndex: 2 (starts at 3rd panel)</div>
      <Flicking :options="{ defaultIndex: 2, 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>

    <!-- defaultIndex: 4 (last) -->
    <div class="demo-container">
      <div class="demo-label">defaultIndex: 4 (starts at last panel)</div>
      <Flicking :options="{ defaultIndex: 4, 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

요약

주요 옵션

옵션	타입	기본값	설명
defaultIndex	number	0	초기 활성 패널 인덱스 (0-based)

값별 비교

값	동작	적합한 상황
0	첫 번째 패널에서 시작 (기본값)	일반적인 캐러셀
n	(n+1)번째 패널에서 시작	특정 패널로 바로 이동, 딥링크
마지막 인덱스	마지막 패널에서 시작	역순 탐색, 최신 항목 먼저

상세 설명

defaultIndex 동작 원리

Flicking이 초기화(init())될 때 지정된 인덱스의 패널로 이동합니다. 애니메이션 없이 즉시 해당 패널이 표시됩니다.

// 첫 번째 패널에서 시작 (기본값)
defaultIndex: 0

// 세 번째 패널에서 시작
defaultIndex: 2

// 마지막 패널에서 시작 (패널이 5개일 때)
defaultIndex: 4

연관 옵션

• circular와의 관계: circular: true에서도 defaultIndex는 정상 동작합니다. 지정된 패널이 초기 활성 패널이 됩니다.
• align과의 관계: align: "center"와 함께 사용하면 초기 패널이 중앙에 위치합니다.

사용 시나리오

언제 사용하나요?

• defaultIndex: 0: 일반적인 순차 탐색 캐러셀
• 특정 인덱스: URL 파라미터로 특정 슬라이드 공유 (딥링크), 이전 상태 복원
• 마지막 인덱스: 최신 항목을 먼저 보여주는 UI, 채팅/피드

주의사항

인덱스 범위

패널 수보다 큰 인덱스를 지정하면 마지막 패널로 이동합니다. 음수 인덱스는 첫 번째 패널로 처리될 수 있습니다.

관련 링크

관련 옵션

• circular: 무한 루프 모드
• align: 패널 정렬

관련 데모

• Circular: 무한 루프 모드
• Alignment: 패널 정렬