Pagination

Reactive API의 currentPanelIndex, totalPanelCount, moveTo를 사용하여 캐러셀과 실시간으로 동기화되는 도트 페이지네이션 UI를 구현합니다.

JavaScript

import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const flicking = new Flicking("#flick");
const reactiveAPI = connectFlickingReactiveAPI(flicking);

// Create pagination buttons
const pagination = document.querySelector(".pagination");
const buttons = [];

for (let i = 0; i < reactiveAPI.totalPanelCount; i++) {
  const btn = document.createElement("button");
  btn.className = `pagination-btn${i === 0 ? " active" : ""}`;
  btn.textContent = i + 1;
  btn.addEventListener("click", () => reactiveAPI.moveTo(i));
  buttons.push(btn);
  pagination.appendChild(btn);
}

// Update active button on index change
reactiveAPI.subscribe("currentPanelIndex", index => {
  buttons.forEach((btn, i) => {
    btn.classList.toggle("active", i === index);
  });
});

Open Sandbox

React

import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
import React from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

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

export default function App() {
  const flickingRef = React.useRef(null);
  const { currentPanelIndex, totalPanelCount, moveTo } = useFlickingReactiveAPI(flickingRef);

  return (
    <div>
      <Flicking ref={flickingRef}>
        {[0, 1, 2, 3, 4].map(index => (
          <div key={index} className="flicking-panel" style={{ backgroundColor: COLORS[index % COLORS.length] }}>
            {index + 1}
          </div>
        ))}
      </Flicking>

      <div className="pagination">
        {Array.from({ length: totalPanelCount }, (_, i) => (
          <button
            key={i}
            className={`pagination-btn ${currentPanelIndex === i ? "active" : ""}`}
            onClick={() => moveTo(i)}
          >
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<script setup>
import Flicking, { useFlickingReactiveAPI } from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

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

const flickingRef = ref(null);
const { currentPanelIndex, totalPanelCount, moveTo } = useFlickingReactiveAPI(flickingRef);
</script>

<template>
  <div>
    <Flicking ref="flickingRef">
      <div
        v-for="index in 5"
        :key="index - 1"
        class="flicking-panel"
        :style="{ backgroundColor: COLORS[(index - 1) % COLORS.length] }"
      >
        {{ index }}
      </div>
    </Flicking>

    <div class="pagination">
      <button
        v-for="i in totalPanelCount"
        :key="i - 1"
        :class="['pagination-btn', { active: currentPanelIndex === i - 1 }]"
        @click="moveTo(i - 1)"
      >
        {{ i }}
      </button>
    </div>
  </div>
</template>


<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: 150px;
  height: 120px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}

@media (hover: hover) {
  .pagination-btn:hover {
    background: #3498db;
    color: white;
  }
}

.pagination-btn.active {
  background: #3498db;
  color: white;
}

</style>

Open Sandbox

요약

주요 API

속성 / 메서드	타입	설명
currentPanelIndex	number	현재 활성화된 패널 인덱스
totalPanelCount	number	전체 패널 수
moveTo	(i: number) => Promise	특정 패널로 이동

동작

상태	도트 스타일
현재 패널	활성화 (강조 표시)
다른 패널	기본, 클릭하여 이동

상세 설명

동작 원리

1. totalPanelCount를 기반으로 도트 버튼을 렌더링
2. currentPanelIndex에 해당하는 도트를 강조 표시
3. 도트 클릭 시 moveTo(index)를 호출하여 해당 패널로 이동
4. 사용자가 드래그하여 새 패널로 이동하면 currentPanelIndex가 자동으로 업데이트되고 도트가 다시 동기화

관련 옵션

• align: "center": 중앙 정렬은 페이지네이션을 가장 직관적으로 느끼게 합니다.
• circular: true: 순환 모드에서는 첫 번째와 마지막 패널이 연결되어 도트가 매끄럽게 순환합니다.

사용 시나리오

이런 경우에 사용하세요

• 배너 / 히어로 슬라이더 위치 표시기
• 이미지 갤러리 페이지 표시기
• 모바일 온보딩 단계 도트

관련 링크

관련 API

• currentPanelIndex: 활성 패널 인덱스
• moveTo: 패널로 이동

관련 데모

• Prev / Next: 이전/다음 버튼 네비게이션
• Progress Bar: 스크롤 진행률 표시기