---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
title: 'Adding a Carousel Layout | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:27:15+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Show quotes, offers or announcements one slide at a time, with any elements on each slide'
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Carousel Layout'
      description: 'Show quotes, offers or announcements one slide at a time, with any elements on each slide'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:27:15+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      articleSection: Layout
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      description: 'Show quotes, offers or announcements one slide at a time, with any elements on each slide'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Layout](/hc/documentation/learn-dxpr-builder/layout/overview) # Adding a Carousel Layout.

Show quotes, offers or announcements one slide at a time, with any elements on each slide

 Learn DXPR BuilderBuild pagesAdd contentLayout

   ## In this guide

 Related guides

- [Image Carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab)

Use the Carousel layout element when you want content to take turns in one spot, such as quotes, offers or announcements. You end up with slides that advance on their own, with a dot for each slide. Unlike the [Image carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel), each slide holds any elements: text, images, buttons and more. The example builds a slider of student quotes.

## Add a carousel layout

1. Hover the column and click **+** in its control bar to open the element picker.
2. In the **Layout** tab, click **Carousel**.
3. Its settings open first. Click **Save** to keep the defaults. The carousel appears with one empty slide.
4. Click **+** inside the slide and add content, such as a **Text** element.
5. To add a slide, hover the carousel and click **Add slide** in its control bar. Click the slide's dot below the carousel to open it, then fill it the same way.

  ## What you see

The first slide shows with a bar for each slide below it. Every 5 seconds the next slide moves in, and after the last one the first comes back. Visitors can click a bar to jump to a slide or swipe on a touch screen. Every slide takes the height of the tallest one, so the content below the carousel does not jump.

## Set up your carousel

Open the settings from **More** > **Settings** in the **Carousel** control bar. The **General** panel holds the timing.

| Setting | What it does | Default |
|---|---|---|
| **Frames per slide** | How many slides show side by side, from 1 to 10. Narrow screens show fewer, down to one on phones | 1 |
| **Disable auto-play** | Stops the slides from advancing on their own | Off |
| **Auto-play interval** | Time between slides, from 1000 to 20000 milliseconds | 5000 |
| **Stop on hover** | Pauses auto-play while the pointer is over the carousel | Off |
| **Dots navigation** | In the **Dots** panel: shows a dot for each slide | On |
| **Next/Previous** | In the **Next/Previous** panel: shows arrow buttons | Off |

### Dots and arrows

With **Dots navigation** on, the **Dots** panel also offers:

- **Dots orientation**: **Outside slider** (below it) or **Inside slider**
- **Dot shape**: **Bar**, **Circle**, **Square** or **Triangle**
- **Active dot transformation**: **None**, **Grow taller**, **Grow wider** or **Scale up**
- **Dot color** and **Active dot color**

With **Next/Previous** on, the **Next/Previous** panel also offers:

- **Orientation**: **Outside slider** or **Inside slider**
- **Dot shape**: the button behind each arrow, **No background**, **Circle**, **Square** or **Bar**
- **Icon color**, **Icon hover color**, **Background color** and **Background hover color**
- **Outside navigation position**: **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** or **Bottom right**

## Slide ideas

- **Testimonial slider**: put a **Block quote** with the quote and a **Text** element with the name on each slide. Keep **Dots navigation** on and **Next/Previous** off, and set **Auto-play interval** to 7000 so visitors can finish reading.
- **Hero carousel**: open a slide's **More** > **Settings** and pick a photo as **Background image** in its **Style** panel. Add a **Text** element with the heading and a **Button**. Switch on **Stop on hover** so visitors can read and click.

## If you don't see it

- **There are no dots below the carousel.** Dots only show once the carousel has two slides, and only with **Dots navigation** on. Click **Add slide**, or switch **Dots navigation** on in the **Dots** panel.
- **The new slide does not show after Add slide.** New slides are added at the end and stay hidden until you open them. Click the last dot below the carousel.
- **The slides do not move on their own.** **Disable auto-play** is on. Switch it off in the **General** panel of the carousel settings.
- **There are no arrows.** **Next/Previous** is off by default. Switch it on in the **Next/Previous** panel.
- **Carousel is missing from the Layout tab of the picker.** Your DXPR Builder user profile leaves it out. An administrator ticks **Carousel** under **Elements** in your profile at `/admin/dxpr_studio/dxpr_builder/profile`.

## What's next?

- [Image carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel): a slideshow of images only, set up in one dialog.
- [Adding a Tabs Panel](/hc/documentation/learn-dxpr-builder/layout/tabs-element): let visitors pick the content instead of waiting for it.
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab): add entrance effects to the content of each slide.