Carousel vs. Marquee
A carousel shows separate slides with controls. A marquee keeps a line of content moving.
Use a carousel when each item needs time and controls. Use a marquee only for unimportant decoration that can pause and stop moving when asked.
See what each pattern does
Try each example. Then read about the job it is made to do.
Carousel
A carousel shows one or a few panels at a time. People move it with arrows, dots, or swipes.
A photo gallery has Previous and Next buttons and shows the slide number. It supports swipes and can pause autoplay.
- Use it when
- Use it when items have an order but there isn't enough room to show them all.
- Do not use it when
- Never hide important choices in a carousel or make it move too quickly on its own.
- Name used in code
aria-roledescription="carousel"
Marquee
A strip of repeated content that keeps moving. It must offer controls or a still version for people who are sensitive to motion.
A festival page moves a short sponsor list slowly. It pauses on hover or focus and becomes a still, wrapped list under reduced motion.
- Use it when
- Use it only for short, repeated content that is not essential. The motion may add mood but must not block reading.
- Do not use it when
- Never use it for instructions, long text, urgent messages, or words people must chase to read.
- Name used in code
overflow clip + duplicated track + prefers-reduced-motion
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Carousel | Use it when items have an order but there isn't enough room to show them all. | Never hide important choices in a carousel or make it move too quickly on its own. | aria-roledescription="carousel" |
| Marquee | Use it only for short, repeated content that is not essential. The motion may add mood but must not block reading. | Never use it for instructions, long text, urgent messages, or words people must chase to read. | overflow clip + duplicated track + prefers-reduced-motion |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Carousel, Marquee for our real user flow. Use this rule: A carousel shows separate slides with controls. A marquee keeps a line of content moving. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.