# Carousels

> Add a carousel of slides, pictures, quotes, products or logos that moves with arrows, dots, a swipe or on its own.

Source: https://uxdeck.app/guide/carousels (checked against uxdeck on 16 October 2026)

Five Blocks are carousels: the same working carousel, set up for a different job. Each moves with arrows, dots, a swipe or on its own, and works with a keyboard and a screen reader. Pick the one closest to what you need, then change anything.

Add one from **Blocks** in the toolbar (see [Add and style Blocks](/guide/blocks)), then select it to see its **Carousel** section in the Design tab.

## The settings

Every carousel has the same settings:

- **Add pictures:** choose several pictures at once; they fill the slides in order.
- **Slides:** **−** and **+** remove the last slide or add one (two at least).
- **Shown at once:** **1**, **2**, **3** or **4** slides in view.
- **Starts on:** the slide it opens on.
- **Picture depth:** **Off**, **Subtle**, **Medium** or **Strong**, how far the pictures move in depth as the slides move.
- **Arrows**, **Dots** and **Swipe and drag:** the ways to move it.
- **Back to the first after the last:** it loops.
- **Plays on its own:** it moves by itself, **Every** 2 to 30 seconds.

On the canvas the carousel shows what the settings say: the arrows, dots and pause button shown or hidden, each slide its share of the view. Resize the carousel and the slides follow.

## Carousel

Slides that move with arrows, dots, a swipe or on their own. Each slide has a heading and a line of body text to start.

It starts with one slide shown, arrows, dots, swipe and looping on, and does not play on its own.

## Picture carousel

Pictures that slide with a sense of depth as they move, each with its caption. Use **Add pictures** to put your own in.

It starts like the Carousel, with **Picture depth** at **Medium**.

## Testimonials

What people say about you, a quote at a time, with their face and name.

It starts like the Carousel: one quote at a time, arrows, dots and looping.

## Products

Products side by side, three at once, each with a picture, a price and a button.

It starts with three shown, arrows and dots on, and stops at the last product rather than looping. Give each product's button a link in the **Prototype** tab.

## Logo strip

The logos of the people you work with, passing on their own, four at once, with a **Pause**.

It starts with four shown, playing on its own every 3 seconds and looping, with no arrows or dots. Visitors can still swipe it.

## Catches

- **A carousel that plays on its own stops** while the pointer or the keyboard is on it, never plays for people who ask for less motion, and visitors can pause it with its **Pause** button. Delete that button and the section warns you.
- **Deleting the arrows or dots** while they are switched on stops them working. Turn the option off instead.
- **Shown at once cannot be more than the slides you have.** Add slides first.
- **Slide padding:** a slide's side padding makes room for the arrows (88 px when one is shown, 24 px when several are). Padding you set yourself stays.
- **For a phone,** set **Shown at once** to 1 in the phone breakpoint. See [Breakpoints](/guide/breakpoints).