Carousel

You might say

I want several hero images to rotate automatically, with left and right arrows too.

Show several panels one at a time in the same spaceA carousel often appears in promotional banners and onboarding, but later slides are easy to miss. Do not place essential information only inside it. If it moves automatically, let people pause it and provide clear controls and position indicators.

Summer new product launch conference

City tour exhibition registration is open

Forest team building review

‹›‹›‹›

You can say this to an AI Agent

Build mobile product images as a user-controlled carousel with position, previous and next controls, thumbnails, swipe, and keyboard support. Do not autoplay by default. Test first and last boundaries, failed images, and a single-image product.

When to use it

A small set of promotional visuals
Summer product launch
Product image gallery
Step 2 · Invite team members
Onboarding walkthrough
Product image
Several related stories in one reserved area
3 / 3

When NOT to use it

Hide critical content on a later slide
Slide 1
Autoplay without pause controls
…
Rotate so quickly that people cannot read
Four destinations crammed into a carousel mean four swipes
Use many slides when a list would be easier to scan
Alex Chen
Carousel ad
A carousel in a form interrupts completion

Anatomy

‹New summer products›

Container for the entire carousel area

Moves to the previous or next slide

The content in each carousel item

Shows which slide is active and how many slides there are

Variants

Slide

‹

Summer New Product Launch

›

For the default pattern: move left and right through several images

Fade

Summer new product launch conference

For a full-width banner with a softer transition

Card

New summer products

When the edges of adjacent slides should hint that users can browse further

Typical use cases

Homepage banner

Summer new product launch conference

See you in the live broadcast room at 20:00 on August 1 →

‹›

Product gallery

Step 2 · Invite team members

Invite colleagues to join the project to view and edit together

Feature tour

‹›

Cream Ceramic Cat Bowl with Heightened Neck Guard

¥49.00

20% off for a limited time

Customer stories

Discover

Limited time event

City Tour · Shanghai Station Registration Now

›

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A mobile product page shows five angles in one main-image area. Users need their current position and manual control. How should it work?

A. Stack all five full-size images vertically and require scrolling through themB. Use a carousel with previous and next controls, position, and selectable thumbnailsC. Change images every two seconds with no pause, arrows, or position