SayUI
← Library→ Turn this into a prompt
Content & display

Carousel / Slideshow

A sequence of slides shown one (or a few) at a time with next/prev controls.

Also known as slideshow · image slider · hero carousel

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Carousel / Slideshow".

Build an image carousel with prev/next buttons, dot indicators, optional autoplay that pauses on hover and focus, and keyboard support; mark slides for assistive tech appropriately.

Anatomy:
- slide: One panel of content or media.
- prev/next + dots: Navigation; pause autoplay for a11y.

Preferred API / pattern: `embla / shadcn carousel patterns`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Autoplay with no pause control
  • ○Avoid: Critical pricing only on slide 3
  • ○Avoid: Dots without labels

In plain wordsHow people search for it

“the sliding images I swipe through on a homepage”“a gallery that moves left and right with dots under it”“those rotating banners at the top of a site”

AnatomyOpen for part names

slide
One panel of content or media.
prev/next + dots
Navigation; pause autoplay for a11y.

How to write itOpen for stack patterns

Web (HTML/CSS)scroll-snap / aria-roledescription patterns
React + Tailwind + shadcn/uiembla / shadcn carousel patterns
SwiftUITabView .page / ScrollView
Ant Design<Carousel>

Notes

Carousels are easy to misuse: autoplay can harm accessibility and conversion. Prefer static layouts when content is critical. If used, provide controls, pause on hover/focus, and don't rely on color-only dots. On touch, swipe should feel native.

Common mistakesHumans and models trip here

  • Autoplay with no pause control: fails a11y expectations.
  • Critical pricing only on slide 3: put key content outside the carousel.
  • Dots without labels: add aria-labels for each slide control.

More failure symptoms on AI broke it.

Related patterns

CardA contained surface grouping related content and actions as one unit.PaginationControls that split large result sets into numbered pages.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.

Spotted a wrong name or missing pattern?

Message on X