Prev / Next

Use isReachStart, isReachEnd, and moveTo from the Reactive API to build navigation buttons that automatically disable at the carousel boundaries.

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

const prevBtn = document.querySelector("#prev-btn");
const nextBtn = document.querySelector("#next-btn");

prevBtn.addEventListener("click", () => {
  if (!reactiveAPI.isReachStart) {
    reactiveAPI.moveTo(flicking.index - 1);
  }
});

nextBtn.addEventListener("click", () => {
  if (!reactiveAPI.isReachEnd) {
    reactiveAPI.moveTo(flicking.index + 1);
  }
});

// Update button state
reactiveAPI.subscribe("isReachStart", value => {
  prevBtn.disabled = value;
});

reactiveAPI.subscribe("isReachEnd", value => {
  nextBtn.disabled = value;
});

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, isReachStart, isReachEnd, moveTo } = useFlickingReactiveAPI(flickingRef);

  const handlePrev = () => {
    if (!isReachStart) {
      moveTo(currentPanelIndex - 1);
    }
  };

  const handleNext = () => {
    if (!isReachEnd) {
      moveTo(currentPanelIndex + 1);
    }
  };

  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="controls">
        <button className="nav-btn" onClick={handlePrev} disabled={isReachStart}>
          Prev
        </button>
        <button className="nav-btn" onClick={handleNext} disabled={isReachEnd}>
          Next
        </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, isReachStart, isReachEnd, moveTo } = useFlickingReactiveAPI(flickingRef);

const handlePrev = () => {
  if (!isReachStart.value) {
    moveTo(currentPanelIndex.value - 1);
  }
};

const handleNext = () => {
  if (!isReachEnd.value) {
    moveTo(currentPanelIndex.value + 1);
  }
};
</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="controls">
      <button
        class="nav-btn"
        :disabled="isReachStart"
        @click="handlePrev"
      >
        Prev
      </button>
      <button
        class="nav-btn"
        :disabled="isReachEnd"
        @click="handleNext"
      >
        Next
      </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;
}

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

.nav-btn {
  padding: 10px 24px;
  border: none;
  background: #3498db;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}

.nav-btn:hover:not(:disabled) {
  background: #2980b9;
}

.nav-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

</style>

Open Sandbox

Summary

Key API

Property / Method	Type	Description
isReachStart	boolean	Whether the first panel is active
isReachEnd	boolean	Whether the last panel is active
currentPanelIndex	number	Currently active panel index
moveTo	(i: number) => Promise	Move to a specific panel

Button States

Position	Prev Button	Next Button
First panel (isReachStart)	disabled	enabled
Middle panel	enabled	enabled
Last panel (isReachEnd)	enabled	disabled

Details

How It Works

• Disable the Prev button when isReachStart is true
• Disable the Next button when isReachEnd is true
• Prev click: moveTo(currentPanelIndex - 1)
• Next click: moveTo(currentPanelIndex + 1)
• Button states auto-sync when the user drags to a new panel

Related Options

• circular: true: In circular mode, isReachStart and isReachEnd are always false, so both buttons remain enabled at all times.

Use Cases

When to use

• Desktop carousels where drag is less discoverable
• Accessibility (a11y) keyboard/button navigation
• Touch-disabled environments

Related Links

Related API

• isReachStart: Start boundary flag
• isReachEnd: End boundary flag

Related Demos

• Pagination: Dot pagination
• Progress Bar: Scroll progress indicator