본문으로 건너뛰기

Nested

nested 옵션으로 중첩된 Flicking에서 자식이 경계에 도달하면 부모 Flicking으로 제어를 전환합니다. 같은 방향의 중첩 Flicking에서 자연스러운 UX를 제공합니다.

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

// nested: false
new Flicking("#outer-false", { align: "center" });
document.querySelectorAll("#outer-false .inner-viewport").forEach(el => {
  new Flicking(el, { nested: false, align: "center", bound: true });
});

// nested: true
new Flicking("#outer-true", { align: "center" });
document.querySelectorAll("#outer-true .inner-viewport").forEach(el => {
  new Flicking(el, { nested: true, align: "center", bound: true });
});
Open on CodeSandboxOpen Sandbox

요약​

주요 옵션​

옵션타입기본값설명
nestedbooleanfalse경계 도달 시 부모로 제어 전환

값별 비교​

값동작적합한 상황
false내부 경계에서 멈춤, 부모 이동 안 됨 (기본값)독립적인 내부 캐러셀
true내부 경계 도달 후 부모로 제어 전환같은 방향의 중첩 캐러셀

상세 설명​

nested 동작 원리​

nested: true로 설정된 자식 Flicking이 첫 번째 또는 마지막 패널에 도달한 후 같은 방향으로 계속 드래그하면, 부모 Flicking이 대신 이동합니다.

// 부모 Flicking
<Flicking>
  <div className="panel">
    {/* 자식 Flicking - nested 설정 */}
    <Flicking nested={true} bound={true}>
      <div>내부 1</div>
      <div>내부 2</div>
    </Flicking>
  </div>
</Flicking>

언제 필요한가?​

  • 필요한 경우: 부모와 자식이 같은 방향(둘 다 horizontal: true 또는 둘 다 false)
  • 불필요한 경우: 부모와 자식이 다른 방향(하나는 수평, 하나는 수직) - 자동으로 구분됨

연관 옵션​

  • bound와의 관계: bound: true와 함께 사용하면 내부 경계가 명확해져 nested 동작이 더 자연스럽습니다.
  • horizontal과의 관계: 부모/자식의 horizontal 값이 다르면 nested 옵션 없이도 자연스럽게 동작합니다.

사용 시나리오​

언제 사용하나요?
  • nested: true: 카테고리별 상품 캐러셀 (외부: 카테고리, 내부: 상품)
  • nested: false: 독립적으로 동작해야 하는 내부 캐러셀

주의사항​

자식 Flicking에 설정

nested 옵션은 자식(내부) Flicking에 설정합니다. 부모에는 설정할 필요가 없습니다.

다른 방향이면 불필요

부모가 수평이고 자식이 수직(또는 반대)이면 nested 옵션 없이도 자연스럽게 동작합니다.

관련 링크​

관련 옵션​

  • bound: 경계 제한 (nested와 함께 사용 권장)
  • horizontal: 이동 방향

관련 데모​

  • Bound: 경계 제한 모드
  • Vertical: 수직 모드 (다른 방향 조합)