본문으로 건너뛰기

Bound

bound 옵션으로 카메라가 첫 번째와 마지막 패널 경계를 넘어가지 않도록 제한합니다. bounce 옵션과 함께 사용하여 경계에서의 탄성 효과를 조절할 수 있습니다.

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

// bound: false (default)
new Flicking("#flick-unbound", {
  bound: false,
  align: "prev"
});

// bound: true
new Flicking("#flick-bound", {
  bound: true,
  align: "prev"
});

// bound: true + bounce: "50%"
new Flicking("#flick-bounce", {
  bound: true,
  bounce: "50%",
  align: "prev"
});
Open on CodeSandboxOpen Sandbox

요약​

주요 옵션​

옵션타입기본값설명
boundbooleanfalse경계 제한 활성화
bouncenumber | string | [number | string, number | string]"20%"바운스 영역 크기

값별 비교​

값동작적합한 상황
bound: false첫/마지막 패널 이후에도 빈 공간으로 드래그 가능무한 스크롤 느낌, 자유로운 탐색
bound: true첫/마지막 패널 경계에서 멈추고 바운스 효과유한한 콘텐츠, 명확한 시작/끝 표시

상세 설명​

bound: false 상세​

기본값입니다. 마지막 패널 이후에도 계속 드래그할 수 있으며, 빈 공간이 보입니다. 손을 떼면 가장 가까운 패널로 스냅됩니다.

bound: true 상세​

카메라가 첫 번째 패널의 시작과 마지막 패널의 끝을 넘어가지 않습니다. 경계에 도달하면 바운스 효과가 표시되어 사용자에게 끝에 도달했음을 알립니다.

bounce 상세​

경계에서 표시되는 탄성 영역의 크기입니다. 값이 클수록 더 많이 당겨지는 느낌을 줍니다.

// 다양한 bounce 값
bounce: "20%"      // 기본값, viewport의 20%
bounce: "50%"      // 더 큰 바운스
bounce: "100px"    // 고정 픽셀 값
bounce: 0          // 바운스 없음
bounce: ["10%", "30%"]  // 시작/끝 다른 값

연관 옵션​

  • circular과의 관계: circular: true와 bound: true는 상호 배타적입니다. 둘 다 true이면 circular가 우선되고 bound는 무시됩니다.
  • moveType: "freeScroll"과의 관계: freeScroll 모드에서 bound: true를 함께 사용하면 경계를 넘어 스크롤되는 것을 방지합니다.

사용 시나리오​

언제 사용하나요?
  • bound: false: 무한 스크롤 느낌을 주고 싶을 때, circular와 함께 사용하지 않을 때
  • bound: true: 콘텐츠의 시작과 끝을 명확히 표시하고 싶을 때, freeScroll 모드에서 경계 제한이 필요할 때

주의사항​

circular과 함께 사용 불가

circular: true와 bound: true를 동시에 설정하면 circular가 우선됩니다. bound 효과를 원하면 circular: false로 설정하세요.

bounce 값 주의

bounce 값이 너무 크면 사용자가 끝에 도달했는지 혼란스러울 수 있습니다. 일반적으로 20~30% 정도가 적절합니다.

관련 링크​

관련 옵션​

  • circular: 무한 루프 모드 (bound와 상호 배타)
  • moveType: 이동 동작 모드 (freeScroll + bound 조합 권장)

관련 데모​