Introduction

The Pager shows users where they are within a list or a slideshow that scrolls horizontally. It gives quick navigation feedback, and helps people keep their bearings inside a carousel of content.

It is a series of circles and dots, and it is read at a glance: the item on screen is the large filled circle, and the dots around it stand for the items on either side.

Anatomy

Circles and dots

A Pager is a series of circles and dots, and each item has its own fixed diameter.

The selected item is the large filled circle. The adjacent items are its immediate neighbors. The overflow indicators are the smallest points: they appear on either side, for the items the Pager does not show. All items are separated by the same fixed spacing of 4 px.

Properties

Color

A single color drives the whole Pager, and it is white by default, because the Pager is usually read over an image. The selected item is always fully opaque, and every other dot takes the same color at 60% opacity. The difference in opacity is what separates the item on screen from the rest, along with the difference in size.

Layout

Placement

The Pager sits at the bottom of the media, centered: a full-width block whose items are grouped in the middle. The inset between the items and the edge belongs to the host, not to the Pager.

Behavior

Short lists

Up to five items, the Pager shows them all: one selected item, and every other one at the adjacent size. With a single item, there is no Pager.

Long lists

Beyond five items, the Pager switches to a reduced display: the selected item, up to four adjacent items, and an overflow indicator on either side. When both indicators are displayed, the selected item sits at the center of the Pager.

Moving from one item to the next

Sizes do not jump from one state to the other: they transition smoothly, so that the selected item grows as its neighbor shrinks. The overflow indicators fade in and out.