Prev / Next

Reactive API의 isReachStart, isReachEnd, moveTo를 사용하여 캐러셀 경계에서 자동으로 비활성화되는 네비게이션 버튼을 구현합니다.

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

요약

주요 API

속성 / 메서드	타입	설명
isReachStart	boolean	첫 번째 패널이 활성 상태인지 여부
isReachEnd	boolean	마지막 패널이 활성 상태인지 여부
currentPanelIndex	number	현재 활성화된 패널 인덱스
moveTo	(i: number) => Promise	특정 패널로 이동

버튼 상태

위치	이전 버튼	다음 버튼
첫 번째 패널 (isReachStart)	비활성화	활성화
중간 패널	활성화	활성화
마지막 패널 (isReachEnd)	활성화	비활성화

상세 설명

동작 원리

• isReachStart가 true일 때 이전 버튼을 비활성화
• isReachEnd가 true일 때 다음 버튼을 비활성화
• 이전 클릭: moveTo(currentPanelIndex - 1)
• 다음 클릭: moveTo(currentPanelIndex + 1)
• 사용자가 드래그하여 새 패널로 이동하면 버튼 상태가 자동으로 동기화

관련 옵션

• circular: true: 순환 모드에서는 isReachStart와 isReachEnd가 항상 false이므로 두 버튼 모두 항상 활성화 상태를 유지합니다.

사용 시나리오

이런 경우에 사용하세요

• 드래그 조작이 잘 인지되지 않는 데스크톱 캐러셀
• 접근성(a11y) 키보드/버튼 네비게이션
• 터치가 비활성화된 환경

관련 링크

관련 API

• isReachStart: 시작 경계 플래그
• isReachEnd: 끝 경계 플래그

관련 데모

• Pagination: 도트 페이지네이션
• Progress Bar: 스크롤 진행률 표시기