Carousel

circular, panelsPerView, align 옵션을 조합하여 다양한 캐러셀 UI를 구성합니다.

JavaScript

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

const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c", "#e67e22", "#2980b9"];

function createPanels(containerId) {
  const camera = document.querySelector(`#${containerId} .flicking-camera`);
  COLORS.forEach((color, i) => {
    const panel = document.createElement("div");
    panel.className = "flicking-panel";
    panel.style.background = color;
    panel.textContent = i + 1;
    camera.appendChild(panel);
  });
}

createPanels("flick1");
createPanels("flick2");
createPanels("flick3");

new Flicking("#flick1", {
  circular: true,
  panelsPerView: 3,
  align: "prev"
});

new Flicking("#flick2", {
  circular: true,
  panelsPerView: 1,
  align: "center"
});

new Flicking("#flick3", {
  circular: false,
  panelsPerView: 3,
  align: "prev",
  bound: true
});

Open Sandbox

React

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

const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c", "#e67e22", "#2980b9"];

export default function App() {
  const panels = COLORS.map((color, i) => (
    <div className="flicking-panel" key={i} style={{ background: color }}>
      {i + 1}
    </div>
  ));

  return (
    <div>
      <div className="demo-section">
        <div className="demo-label">circular + panelsPerView: 3 + align: "prev"</div>
        <Flicking circular={true} panelsPerView={3} align="prev">
          {panels}
        </Flicking>
      </div>

      <div className="demo-section">
        <div className="demo-label">circular + panelsPerView: 1 + align: "center"</div>
        <Flicking circular={true} panelsPerView={1} align="center">
          {COLORS.map((color, i) => (
            <div className="flicking-panel" key={i} style={{ background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>

      <div className="demo-section">
        <div className="demo-label">circular: false + panelsPerView: 3 (bounded slider)</div>
        <Flicking circular={false} panelsPerView={3} align="prev" bound={true}>
          {COLORS.map((color, i) => (
            <div className="flicking-panel" key={i} style={{ background: color }}>
              {i + 1}
            </div>
          ))}
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <div class="demo-section">
      <div class="demo-label">
        circular + panelsPerView: 3 + align: "prev"
      </div>
      <Flicking :options="{ circular: true, panelsPerView: 3, align: 'prev' }">
        <div v-for="(color, i) in COLORS" :key="i"
             class="flicking-panel" :style="{ background: color }">
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>

    <div class="demo-section">
      <div class="demo-label">
        circular + panelsPerView: 1 + align: "center"
      </div>
      <Flicking :options="{ circular: true, panelsPerView: 1, align: 'center' }">
        <div v-for="(color, i) in COLORS" :key="'b' + i"
             class="flicking-panel" :style="{ background: color }">
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>

    <div class="demo-section">
      <div class="demo-label">
        circular: false + panelsPerView: 3 (bounded slider)
      </div>
      <Flicking :options="{ circular: false, panelsPerView: 3, align: 'prev', bound: true }">
        <div v-for="(color, i) in COLORS" :key="'c' + i"
             class="flicking-panel" :style="{ background: color }">
          {{ i + 1 }}
        </div>
      </Flicking>
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";

const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c", "#e67e22", "#2980b9"];
</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 {
  height: 200px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #555;
  font-size: 14px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
circular	boolean	false	순환 모드
panelsPerView	number	-1	화면당 패널 수 (-1이면 비활성)
align	string | number	"center"	패널 정렬 위치

조합별 비교

조합	동작	적합한 상황
circular + panelsPerView: 3 + align: "prev"	3개씩 보이는 무한 순환	상품 목록, 카드 캐러셀
circular + panelsPerView: 1 + align: "center"	1개씩 중앙 정렬 무한 순환	히어로 슬라이더, 배너
circular: false + panelsPerView: 3 + bound	끝이 있는 3열 슬라이더	유한 목록, 갤러리

상세 설명

circular + panelsPerView 조합

circular: true와 panelsPerView를 함께 사용하면 지정된 수의 패널이 화면에 보이면서 무한 순환됩니다. 패널 너비는 100% / panelsPerView로 자동 계산됩니다.

align의 역할

• "prev": 패널이 왼쪽 정렬 → 리스트형 캐러셀에 적합
• "center": 현재 패널이 중앙 → 스포트라이트형에 적합

비순환 슬라이더

circular: false + bound: true로 설정하면 끝에서 빈 공간 없이 멈추는 일반 슬라이더가 됩니다.

연관 옵션

• circularFallback과의 관계: 패널 수가 부족하여 순환이 불가능할 때 대체 동작 설정
• bound와의 관계: circular: false일 때 bound: true로 빈 공간 방지
• noPanelStyleOverride와의 관계: panelsPerView 사용 시 패널 너비 자동 설정을 끄고 CSS로 직접 제어 가능

사용 시나리오

언제 사용하나요?

• 상품 캐러셀: circular + panelsPerView: 3~5 조합
• 히어로 배너: circular + panelsPerView: 1 + align: "center" 조합
• 이미지 갤러리: circular: false + panelsPerView: 3 + bound 조합

주의사항

주의

• circular: true가 동작하려면 패널 총 너비가 뷰포트보다 커야 합니다. 패널이 부족하면 circularFallback 설정을 확인하세요.
• panelsPerView를 설정하면 패널의 CSS width가 자동으로 오버라이드됩니다. CSS에서 별도로 width를 설정하면 충돌할 수 있습니다.

관련 링크

관련 옵션

• circular: 순환 모드
• panelsPerView: 화면당 패널 수
• align: 패널 정렬
• circularFallback: 순환 불가 시 대체 동작
• bound: 경계 제한

관련 데모

• Circular: circular 옵션 자체의 on/off 비교
• Panels Per View: panelsPerView 옵션 상세
• Fullpage Scroll: 다른 옵션 조합 패턴