Carousels.
Carousels let learners page through a sequence of content cards. They're one of the most-debated components in web design — beloved by marketers, distrusted by usability researchers. In eLearning, they earn their place when used deliberately and break the experience when used by default.
Sequential content that benefits from paging.
A carousel works when each card is a distinct chunk and the learner benefits from controlled pacing — one idea at a time, processed deliberately. It's a chunking pattern, not a layout shortcut.
- Step-by-step content where each step is its own card.
- "Meet the team" or "Our values" pages with one item per card.
- Showcasing examples — case studies, project samples, before/after.
- Quick wins or tips presented one per card for emphasis.
Hiding important content from learners.
Research is consistent: most learners click through at most one or two carousel slides. Anything past slide 2 might as well not exist. Don't put critical content there — use click-to-reveal patterns or just stack the content on the page.
- Compliance content that must be acknowledged.
- Anything assessable — learners may miss it.
- Auto-playing carousels — they take agency away from the learner.
- Heavy content blocks that should just be a stacked page.
Try it.
A four-slide carousel — "principles of good carousel design". Use the arrows, click the dots, or focus the carousel and use left/right arrow keys. Notice it doesn't auto-play, and the dots tell you which slides you've already seen.
Slide 1 of 4
Visited dots fill in solid as a subtle progress signal. The learner can see at a glance which slides they've already seen — a small touch that helps completion-minded learners feel they're making progress.
Get the visuals right.
Both arrows and dots
Arrows for sequential paging, dots for jumping to specific slides. Some carousels offer only one or the other — that limits both the learner who wants to scan ahead and the learner who wants to step through. Use both.
Show progress visually
Visited dots should look different from unvisited ones — filled vs hollow, dark vs light. This single feature helps learners track what they've seen and reduces the "did I see this slide?" friction.
Generous tap targets on dots
The visible dot can be 8 to 12 pixels. The clickable target around it should be at least 32 pixels. Tiny dots that miss the tap are infuriating on touch screens.
Accessibility — keyboard navigation
Left and right arrow keys should move slides when the carousel is focused. Tab should reach the controls in order. Each slide should be reachable by keyboard, not just mouse or touch.
Accessibility — ARIA roles
Use aria-roledescription="carousel" on the container, role="group" aria-roledescription="slide" on each slide, and a polite aria-live region for slide-change announcements. Screen readers need explicit signals — carousels look the same as static content to them otherwise.
No auto-play. If you must, allow pausing.
Auto-advancing carousels fail accessibility, fail slow readers, and fail learners with cognitive disabilities. If a stakeholder demands auto-play, build a pause button that's always visible, and pause on any user interaction.
How to use carousels that earn their place.
Test if a carousel is the right pattern at all.
Before you build a carousel, ask: would this content be better as a stacked list? A click-to-reveal accordion? A grid of cards? Carousels hide content behind clicks; most other patterns don't. The strongest argument for a carousel is "the learner benefits from pacing themselves through this content one card at a time" — if that's not the case, pick something else.
Three to six slides — no more.
Two slides is barely a carousel — make it two side-by-side cards. Seven or more and the engagement curve falls off a cliff. The middle slides (4, 5, 6) get the least attention; beyond that, most learners stop paging. If you have more content, group into chapters or sections, each with its own short carousel.
Lead with the most important content.
Slide 1 will get the most eyes. Don't save the punchline for slide 4 — most learners won't see it. If there's an order the content must go in (steps, sequences), of course follow it. If the order is flexible, sort by importance.
Never use them for required content.
Anything the learner must read shouldn't be in a carousel. The whole pattern of "click to see more" creates an option to skip — and many will. Put required content in stacked blocks where it can't be missed. Save carousels for enriching, optional, or example content.
Mobile: full-width slides, generous swipe gestures.
On mobile, carousels are particularly tricky — swipe gestures conflict with scroll, dots become hard to tap, and slide content gets cramped. Either redesign the carousel for mobile (single-card full-width, large swipe areas, hide dots in favour of a counter), or fall back to a vertical stack below a certain breakpoint.
Visited state on dots matters.
Filled dots for "you've been here", hollow for "you haven't" — a single visual treatment that quietly does a lot. Completion-minded learners use it to track progress. Casual learners use it to decide whether they've seen enough.
Don't loop infinitely.
When the learner reaches the last slide, the Next button should disable — not loop back to the start. Looping creates the disorienting experience of "wait, have I seen this one before?" Disable Next at the end, and let the carousel feel finished.
When you'd reach for a carousel.
"Meet your team" introductions
Onboarding modules where the learner meets key colleagues — one person per card. Optional content, well-suited to paging.
Quick tips or principles
"Five things to remember about customer service." One principle per card, with the option to dwell or move on. Better than a wall of text.
Case study showcases
A handful of examples — past projects, scenarios, success stories — each as a card. Learners can browse without being forced to read every one.
Step-by-step processes
Where order matters and each step is its own moment — a recipe, a routine, an incident response. Pair with navigation buttons if the scope is bigger than a small carousel.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.