Design prompts for carousels

A carousel is a way to fit a set of peers into one slot: product shots, testimonials, logos, onboarding screens. It earns its place only when people are browsing options they came to compare, and only when they stay in control of the movement. The ones that work lead with the strongest slide, show a peek of the next so you know there is more, give you real prev and next controls, never auto-rotate something important out from under you, and stay reachable by keyboard. The prompts below are the most-copied carousel and slider designs in the Superdesign library, from card-swap showcases and image carousels to testimonial sliders, logo marquees and 3D coverflow. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a carousel that looks designed, not generated

An AI design agent has a strong default for a carousel, and most of those defaults are the things usability research warns against: a full-bleed hero that auto-rotates every few seconds, a single set of tiny dots, no sense of how many slides there are, and no keyboard support. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a [type] carousel for [the set of peers it holds, e.g. product photos, testimonials, customer logos] that someone is browsing to [the decision it supports].
Use a carousel only because these are peers worth comparing in one slot. If one slide is an important promo or CTA, pull it out into a static block instead.
Rotation: do not auto-advance. If it must, set 5 to 7 seconds per slide, pause on hover and on focus, and show a visible pause button.
Controls: large prev and next buttons (about a 62px target), grouped close together, plus a clickable position indicator. Lead with the strongest slide.
Position and peek: show where you are with a "[n] of [total]" label, and crop the next slide so a slice peeks in to signal there is more.
Each slide: real content, [the headline and image per slide], not a placeholder. Keep slide heights equal.
Accessibility: arrow-key navigation, role="group" with aria-roledescription="carousel" on the container and "slide" on each item, announce the current slide, and swipe on mobile with the buttons still present.
Style: a neutral base with one [accent] color for the active dot and the controls, a named typeface (not the default Inter), and no heavy gradient or drop shadow.

When to use one

Default: It reaches for an auto-rotating hero carousel to hold an important promo or call to action, the one thing it should never bury in a slider. Erik Runyon found only about 1% of visitors click a slide, and 89% of those click only the first.

Constrain it: Reserve the carousel for peers people are browsing to compare (a gallery, testimonials, logos) and pull any single important message out into a static block.

Auto-rotation

Default: It auto-advances every few seconds with no way to pause, so slow readers, screen reader users and anyone reading in a second language lose the slide before they finish. Nielsen Norman Group calls auto-forwarding a conversion killer.

Constrain it: Say no auto-advance, or if it must rotate, set 5 to 7 seconds per slide, pause on hover and on focus, and add a visible pause button.

Navigation controls

Default: It ships a single row of tiny 3px dots and no buttons, so there is nothing big enough to click and dragging is the only way to move.

Constrain it: Ask for large prev and next buttons, about a 62px target, grouped close together, with the dots as a secondary position indicator. Smashing Magazine recommends never relying on dots alone.

Position and peek

Default: It shows one full-bleed slide at a time with no count, so a visitor has no idea how many slides there are or where they are in the set.

Constrain it: Require a "[n] of [total]" label and crop the next slide so a slice peeks in. The peek is the strongest signal that more content is there.

Accessibility

Default: It builds the carousel from bare divs with no roles, no keyboard support and no labels, so it is invisible to a screen reader and unusable without a mouse.

Constrain it: Ask for arrow-key navigation, role="group" with aria-roledescription="carousel" and "slide", a current-slide announcement, and pause on focus. This is the W3C ARIA carousel pattern.

Look and type

Default: Left alone it reaches for a purple gradient, the Inter typeface, and a heavy drop shadow, the look of every AI carousel on the internet.

Constrain it: Name a neutral base, one accent color for the active dot and the controls, a real typeface, and no heavy gradient or shadow.

Frequently asked questions

What is a carousel in web design?

A carousel, also called a slider or slideshow, shows a set of content frames in a single slot that you move through one or a few at a time. The frames can be images, product cards, testimonials, or logos. A slider usually shows one frame at a time, while a carousel often shows several with a peek of the next, but the terms are used interchangeably.

Are carousels good or bad for UX?

They are good when people are actively browsing peers they came to compare, like product photos or testimonials, and bad when you hide an important promo or call to action inside one. The fix is control: lead with the strongest slide, never auto-rotate important content, give real prev and next buttons, and let people pause. Nielsen Norman Group recommends a static hero over an auto-rotating one for anything that matters.

Should a carousel auto-rotate?

Usually no. Auto-rotation moves the content before slow readers, screen reader users, and people reading in a second language can take it in, and most visitors tune it out as an ad. If you must auto-advance, give each slide 5 to 7 seconds, pause on hover and on focus, and show a visible pause button so people can stop it.

Why does my AI-generated carousel look generic?

Because a vague prompt gets the model defaults: a full-bleed purple gradient hero that auto-rotates every few seconds, the Inter typeface, a single row of tiny dots, and no keyboard support. Name what the slides hold, turn off auto-rotation, ask for large prev and next buttons, a "3 of 8" position with a peek of the next slide, the ARIA roles, and one accent on a neutral base, and it stops reaching for the average.

How do you write a prompt to generate a carousel UI?

Describe the brief, not the vibe: the peers each slide holds, why a carousel fits instead of a static block, the rotation rule (ideally none), large prev and next controls, a position indicator with a peek of the next slide, the keyboard and ARIA behavior, and one accent color on a neutral base. The template above walks through each part, and you can open any example here to see a full prompt that works.