Pagination dots

많은 페이지를 점 형태로 축약하여 표현하는 네비게이션 요소입니다. 전통적인 숫자 기반 Pagination의 기능을 유지하면서도 시각적으로는 단순한 점 형태를 사용합니다.

Anatomy

  1. 1. Active dot
  2. 2. Inactive dot

Variants

Variants
Size

Click event

기본적으로 최대 5개의 점이 표현됩니다. 점에 호버 할 시 모든 페이지가 점으로 표현되며 점을 Click하여 해당 페이지 혹은 이미지로 이동이 가능합니다.

콘텐츠나 이미지를 자동으로 순환시킬 수 있습니다. 순환 시간은 프로젝트 내에서 자유롭게 결정할 수 있으며 순환 동작은 Pagination dots에 포함되어있지 않습니다.

Usage

Normal

요소와 20px 이상의 간격을 유지하여 배치합니다. 페이지 혹은 콘텐츠 외부에 위치하여 Indicator의 명시성을 확보합니다.

White

이미지 내부에 위치할 수 있으며 상하좌우 16px 이상의 여백을 두고 배치합니다.

Accessibility

KeyDescription
ArrowRight다음 요소로 값을 변경합니다. (Dots 내부에서 순환)
ArrowLeft이전 요소로 값을 변경합니다. (Dots 내부에서 순환)
Home PageUp첫 번째 요소로 포커스를 이동합니다.
End PageDown마지막 요소로 포커스를 이동합니다.
Enter현재 포커스된 요소를 클릭합니다.

How to use

Do

이미지의 순서를 명확히 안내해야할 경우 Counter 요소와 함께 배치하여 사용합니다.

Don’t

요소의 Background, Color 등을 커스터마이징하여 사용하지 않습니다.

© 2026 Wanted Lab, Inc.