Navigation
Page control
A page control is a short row of dots below a carousel or slider, one dot per slide, with the active slide's dot filled or stretched to show position.
- Also called
- Carousel dots, Pagination dots, Dot indicators, Slide indicators
- Spotted on
- 15 of 422 homepages
- Browse examples
- Mobile designs →
What is a page control?
Page controls answer two questions about a carousel: how many slides are there, and which one am I looking at? On SaaS sites they sit under testimonial sliders, customer-story carousels and banner rotators. Tennr shows three quote cards with three pagination dots; Typeform's lilac story cards sit above nine dots; Looka's banner carousel cycles three backdrops with three dots beneath.
They matter most on mobile. A row of cards that sits side by side on desktop often becomes a swipeable single card on a phone, and the dots are the only hint that more is waiting. Our mobile reviews keep noting it: CometChat's quotes become one card with pagination dots, and Jitter's carousel gets dots instead of arrows.
Dots are a weak control on their own: they are small, they carry no labels and many visitors never click them. Pair them with swipe on touch screens and with arrows or a visible next card on desktop, and keep the count low; past six or seven dots, the row stops telling anyone anything.
When to use a page control, and when not to
Use it for
- A few slidesThree to six slides, where a dot per slide is countable at a glance.
- Swipeable mobile rowsCards that collapse into a horizontal swipe on phones and need a hint that more exist.
- Showing progress in a rotationAn auto-advancing banner where visitors should see where they are in the cycle.
Avoid it for
- Many slidesTen or more dots become a texture, not a control; use arrows, a counter or a grid instead.
- Long lists of pagesBlog archives and search results need numbered pagination with real URLs.
- The only controlTiny dots alone are hard to hit; add arrows or swipe so the carousel is usable.
Anatomy of a page control
- 1Dot rowA centered row of small circles, usually 6–10px, placed just below the carousel.
- 2Active dotThe current slide's dot, filled, darker or stretched into a short pill.
- 3Inactive dotsMuted dots for the other slides, each optionally clickable.
- 4Companion arrowsOptional previous and next buttons on either side of the row or the carousel.
Common page control variants
1. Plain dots
Equal circles with one filled, the classic version.
2. Pill indicator
The active dot stretches into a short bar, which reads more clearly at small sizes.
3. Progress dots
The active indicator fills over time to show when an auto-advancing slide will change.
4. Dots with arrows
The row flanked by arrow buttons, common in testimonial sliders.
Spotted in our design reviews
Our reviews describe a page control on 15 of the 422 SaaS homepages in the catalog. A few of them:
The banner carousel cycles peach, blue and purple backdrops, with three dots beneath.
Looka · Banner, press logos and three-step walkthrough
Below, a carousel of full-bleed photo cards shows "Take bookings" with a calendar mockup, neighbours cropped at both edges and eight pagination dots underneath.
Whacka · Statement block and capability carousel
Yellow arrow buttons and four dots control the carousel, and a rocket leads an oversized marquee line across the page.
Fathom · Ratings, customer logos and product carousel
Dark story cards follow, "HSBC boosts productivity with Mistral." and an ASML card, each with a "Learn more" button, plus six pagination dots and arrows.
Mistral · Logos, stories and product map
A KFC testimonial sits centred with pagination dots, attributed to a Sr.
Contentful · Value row, testimonial and accordion
A light band follows with five logo tiles then lilac carousel cards such as "SmartBug Media increased sales leads by 40% with one form" above nine dots.
Typeform · Research Flow, customer proof and integrations
"What our customers say" follows with three white quote cards, each with a small headshot, name and title, and three pagination dots.
Tennr · Patient flow and testimonials
Feature grids and the six detail items become single columns, the quotes wrap to five lines, and the carousel gets dots instead of arrows.
Jitter · Mobile
Often confused with
Page control vs. pagination
Pagination uses numbered links to move between separate pages of a list. A page control uses unlabeled dots to show position within one carousel.
Page control vs. carousel
The carousel is the sliding container of content; the page control is the small indicator that tracks which slide is showing.
Page control vs. stepper
A stepper tracks ordered steps of a task and usually labels them. Page-control dots have no labels and imply no order of completion.
Frequently asked
Do carousel dots need to be clickable?
They should be, since some visitors will try. But don't rely on them as the main control: make the slides swipeable on touch screens and add arrows on desktop.
How many dots is too many?
Once visitors can't count them at a glance, roughly seven or more, the dots stop conveying position. Shorten the carousel or switch to a grid.