Back to Motion Prompt examples
UI component names · #10
Carousel
Slides that move sideways to show one item at a time. Each click on the right arrow slides a row of three different images one step to the left, and the dot below moves.
Choosing & switchingcarouselsliderslideshowgalleryswipepaging-dots
Full motion specification
How the movement works
Use it to show several images or featured items in limited space, one at a time.
- 014.5 s cycle on a 542×191 card. Slides 330×138, radius 8, centred with an 18 px gap; the neighbours peek in at the edges.
- 02White round buttons (radius 18, shadow blur 10) with chevrons at left and right; three dots below (current one blue 16×8, others 8×8).
- 03The cursor clicks the right arrow (514, 88) at 1.0, 2.1 and 3.2 s.
- 04Each click moves the row 348 px left (one slide plus gap) over 0.4 s with easeInOutCubic.
- 05The three pictures (landscape, three circles, bar chart) repeat, so after three moves the first is back.
Prompt
Turn the top images into a carousel: the right arrow moves one slide in 0.4 s, with position dots below.