Pagination

Use currentPanelIndex, totalPanelCount, and moveTo from the Reactive API to build a dot pagination UI that stays in sync with the carousel.

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;
}

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

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

</style>

Open Sandbox

Summary

Key API

Property / Method	Type	Description
currentPanelIndex	number	Currently active panel index
totalPanelCount	number	Total number of panels
moveTo	(i: number) => Promise	Move to a specific panel

Behavior

State	Dot Style
Current panel	Active (highlighted)
Other panels	Default, click to navigate

Details

How It Works

1. Render dot buttons based on totalPanelCount
2. Highlight the dot matching currentPanelIndex
3. On dot click, call moveTo(index) to navigate
4. When the user drags to a new panel, currentPanelIndex updates automatically and the dots re-sync

Related Options

• align: "center": Center alignment makes pagination feel most intuitive.
• circular: true: In circular mode, dots cycle seamlessly as the first and last panels connect.

Use Cases

When to use

• Banner / hero slider position indicator
• Image gallery page indicator
• Mobile onboarding step dots

Related Links

Related API

• currentPanelIndex: Active panel index
• moveTo: Navigate to panel

Related Demos

• Prev / Next: Previous/Next button navigation
• Progress Bar: Scroll progress indicator