Carousel Dots

Page-indicator dots for a carousel.

Last updated

August 14, 2026

How to use

Add the Carousel and give it a unique Carousel ID.
Place an instance and set its Carousel ID to the same value.
Use Layout to set direction (horizontal or vertical), alignment, gap, and padding for the dot strip.
Style the Inactive, Hover, and Active dots — each has its own width, height, color, and radius.
Optionally set Single Page to Hide so the dots disappear when there's only one page.

Inactive, Hover, and Active dot styles

Dots are styled directly in the panel rather than connected as a design — Inactive, Hover, and Active each get their own width, height, color, and radius:

`Style`	When it applies
`Inactive`	Any non-current dot. Can also set its own `Color` under `Hover`, separate from the `Hover` style.
`Hover`	A non-active dot while the customer is hovering it.
`Active`	The current position's dot. Fractional visible-item counts always keep a final dot active at the clamped end.

If Inactive's own hover color isn't set, hovering falls back to the Hover style's color — keep the two consistent if you want a single, predictable hover look.

What counts as a reachable position

Dots represent every distinct reachable carousel position, not a raw count of items. In Item navigation that's one dot per reachable item position; in Page navigation it's one dot per page, including the final clamped page. Clicking a dot jumps the carousel straight to that position, and each dot is properly labeled for screen readers. Dot transitions animate unless the customer prefers reduced motion. On the disconnected canvas, five representative dots preview with the first one active, matching the carousel's initial page.