Panels Per View

panelsPerView 옵션으로 viewport에 동시에 표시될 패널 수를 지정합니다. 양수 값을 설정하면 패널 크기가 자동으로 조정됩니다.

JavaScript

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

// panelsPerView: -1 (default)
new Flicking("#flick-manual", {
  panelsPerView: -1,
  align: "prev"
});

// panelsPerView: 3
new Flicking("#flick-three", {
  panelsPerView: 3,
  align: "prev"
});

// panelsPerView: 1
new Flicking("#flick-one", {
  panelsPerView: 1,
  align: "center"
});

Open Sandbox

React

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

export default function App() {
  return (
    <div>
      {/* panelsPerView: -1 (default, manual sizing) */}
      <div className="demo-container">
        <div className="demo-label">panelsPerView: -1 (default, manual panel sizing)</div>
        <Flicking className="manual-size" panelsPerView={-1} align="prev">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>

      {/* panelsPerView: 3 */}
      <div className="demo-container">
        <div className="demo-label">panelsPerView: 3 (auto-sized to show 3 panels)</div>
        <Flicking panelsPerView={3} align="prev">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>

      {/* panelsPerView: 1 */}
      <div className="demo-container">
        <div className="demo-label">panelsPerView: 1 (fullscreen slider)</div>
        <Flicking panelsPerView={1} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- panelsPerView: -1 (default, manual sizing) -->
    <div class="demo-container">
      <div class="demo-label">panelsPerView: -1 (default, manual panel sizing)</div>
      <Flicking class="manual-size" :options="{ panelsPerView: -1, align: 'prev' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>

    <!-- panelsPerView: 3 -->
    <div class="demo-container">
      <div class="demo-label">panelsPerView: 3 (auto-sized to show 3 panels)</div>
      <Flicking :options="{ panelsPerView: 3, align: 'prev' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>

    <!-- panelsPerView: 1 -->
    <div class="demo-container">
      <div class="demo-label">panelsPerView: 1 (fullscreen slider)</div>
      <Flicking :options="{ panelsPerView: 1, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";
</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: 120px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}
/* panelsPerView: -1, manual panel sizing */
.manual-size .flicking-panel {
  width: 150px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
panelsPerView	number	-1	viewport에 표시될 패널 수 (-1: 자동 계산 안 함)
noPanelStyleOverride	boolean	false	패널 크기 자동 조정 비활성화

값별 비교

값	동작	적합한 상황
-1	패널 크기 변경 안 함. CSS로 수동 지정 필요	다양한 크기의 패널, 커스텀 레이아웃
1	패널이 viewport 전체 채움	풀스크린 슬라이더, 히어로 배너
3	정확히 3개 패널이 보이도록 resize	제품 카드, 썸네일 갤러리
n	정확히 n개 패널이 보이도록 resize	반응형 그리드 캐러셀

상세 설명

panelsPerView: -1 상세

기본값입니다. 패널 크기를 변경하지 않으며, CSS로 직접 패널 크기를 지정해야 합니다. 다양한 크기의 패널을 혼합하거나 커스텀 레이아웃이 필요할 때 사용합니다.

/* panelsPerView: -1일 때 필수 */
.flicking-panel {
  width: 150px; /* 수동 지정 */
}

panelsPerView: 양수 상세

지정한 수만큼 패널이 viewport에 보이도록 패널 크기가 자동으로 조정됩니다. CSS에서 패널 width를 지정할 필요가 없습니다.

// viewport에 정확히 3개 패널 표시
new Flicking("#el", { panelsPerView: 3 });

noPanelStyleOverride 상세

panelsPerView가 활성화되어 있을 때 패널의 width/height 스타일 수정을 방지합니다. 모든 패널 크기를 직접 관리할 때 성능 최적화 용도로 사용합니다.

연관 옵션

• align과의 관계: panelsPerView와 함께 사용할 때 align: "prev"가 일반적입니다. 왼쪽 정렬로 패널이 순차적으로 보입니다.
• virtual과의 관계: virtual 옵션 사용 시 panelsPerView > 0이 필수입니다. -1이면 virtual이 무시됩니다.
• circular와의 관계: panelsPerView 설정은 circular 활성화 조건(전체 패널 크기 ≥ viewport)에 영향을 줄 수 있습니다.

사용 시나리오

언제 사용하나요?

• panelsPerView: -1: 다양한 크기의 카드, 태그 리스트, 커스텀 레이아웃
• panelsPerView: 1: 히어로 배너, 풀스크린 온보딩, 이미지 뷰어
• panelsPerView: 3~5: 제품 캐러셀, 썸네일 갤러리, 팀 멤버 소개

주의사항

CSS 충돌 주의

panelsPerView에 양수 값을 설정하면 Flicking이 패널 width를 자동으로 계산합니다. CSS에서 별도로 width를 지정하면 충돌이 발생할 수 있습니다.

virtual 사용 시 필수

virtual 옵션을 사용하려면 반드시 panelsPerView > 0으로 설정해야 합니다. -1이면 virtual이 동작하지 않습니다.

관련 링크

관련 옵션

• noPanelStyleOverride: 패널 스타일 자동 수정 방지
• virtual: 가상 스크롤 (panelsPerView 필수)
• align: 패널 정렬 방식

관련 데모

• Virtual Scroll: 대량 패널 최적화 (panelsPerView 필수)
• Alignment: 정렬 옵션