---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
title: '添加轮播布局 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:13+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '当需要内容在一处轮流显示（如引言、优惠或公告）时使用 Carousel 布局元素。最终得到自动前进的幻灯片，每张一个圆点。与以下内容不同 图像轮播，每张幻灯片可容纳任何元素：文本、图像、按钮等。本例构建一个学员引言轮播。'
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加轮播布局
      description: '当需要内容在一处轮流显示（如引言、优惠或公告）时使用 Carousel 布局元素。最终得到自动前进的幻灯片，每张一个圆点。与以下内容不同 图像轮播，每张幻灯片可容纳任何元素：文本、图像、按钮等。本例构建一个学员引言轮播。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:19:13+0000'
      dateModified: '2026-10-24T09:09:48+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/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      description: '当需要内容在一处轮流显示（如引言、优惠或公告）时使用 Carousel 布局元素。最终得到自动前进的幻灯片，每张一个圆点。与以下内容不同 图像轮播，每张幻灯片可容纳任何元素：文本、图像、按钮等。本例构建一个学员引言轮播。'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 添加轮播布局.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Image Carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [让元素随滚动、悬停或点击动起来](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)

当需要内容在一处轮流显示（如引言、优惠或公告）时使用 Carousel 布局元素。最终得到自动前进的幻灯片，每张一个圆点。与以下内容不同 [图像轮播](/hc/documentation/learn-dxpr-builder/elements/image-carousel)，每张幻灯片可容纳任何元素：文本、图像、按钮等。本例构建一个学员引言轮播。

## 添加轮播布局

1. 悬停列并点击 **+** 在其控制栏中以打开元素选择器。
2. 在 **Layout** 选项卡，点击 **Carousel**.
3. 其设置首先打开。点击 **Save** 以保持默认值。轮播以一张空幻灯片出现。
4. 点击 **+** 在幻灯片内并添加内容，例如 **Text** 元素。
5. 要添加幻灯片，悬停轮播并点击 **Add slide** 在其控制栏中。点击轮播下方幻灯片的圆点打开它，然后以同样方式填充。

  ## 您会看到的内容

第一张幻灯片显示，下方每张幻灯片一个条。每 5 秒下一张移入，最后一张之后第一张回来。访客可以点击条跳转到幻灯片或在触摸屏上滑动。每张幻灯片取最高一张的高度，因此轮播下方的内容不跳动。

## 设置轮播

从以下位置打开设置 **More** > **Settings**：**Carousel** 控制栏。**General** 面板掌握计时。

| 设置 | 它的作用 | 默认值 |
|---|---|---|
| **Frames per slide** | 并排显示多少张幻灯片，1 到 10。窄屏显示更少，手机上最少一张 | 1 |
| **Disable auto-play** | 阻止幻灯片自动前进 | Off |
| **Auto-play interval** | 幻灯片间隔，1000 到 20000 毫秒 | 5000 |
| **Stop on hover** | 指针悬停轮播时暂停自动播放 | Off |
| **Dots navigation** | 在 **Dots** 面板：显示每张幻灯片的圆点 | On |
| **Next/Previous** | 在 **Next/Previous** 面板：显示箭头按钮 | Off |

### 圆点和箭头

当 **Dots navigation** 打开，**Dots** 面板还提供：

- **Dots orientation**: **Outside slider** （在轮播下方）或 **Inside slider**
- **Dot shape**: **Bar**, **Circle**, **Square** 或 **Triangle**
- **Active dot transformation**: **None**, **Grow taller**, **Grow wider** 或 **Scale up**
- **Dot color** 和 **Active dot color**

当 **Next/Previous** 打开，**Next/Previous** 面板还提供：

- **Orientation**: **Outside slider** 或 **Inside slider**
- **Dot shape**：每个箭头背后的按钮，**No background**, **Circle**, **Square** 或 **Bar**
- **Icon color**, **Icon hover color**, **Background color** 和 **Background hover color**
- **Outside navigation position**: **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** 或 **Bottom right**

## 幻灯片创意

- **Testimonial slider**：放置一个 **Block quote** 带引言和 **Text** 每张幻灯片上带名称的元素。保持 **Dots navigation** 打开并 **Next/Previous** 关闭，并设置 **Auto-play interval** 为 7000 以便访客读完。
- **Hero carousel**：打开幻灯片的 **More** > **Settings** 并选择一张照片作为 **Background image** 在其 **Style** 面板。添加一个 **Text** 带标题和 **Button**。打开 **Stop on hover** 以便访客阅读和点击。

## 如果您看不到它

- **轮播下方没有圆点。** 仅当轮播有两张幻灯片且仅带以下内容时圆点显示 **Dots navigation** 打开。点击 **Add slide**，或切换 **Dots navigation** 在以下位置打开 **Dots** 面板。
- **点击 Add slide 后新幻灯片不显示。** 新幻灯片添加到末尾并保持隐藏，直到您打开它们。点击轮播下方的最后一个圆点。
- **幻灯片不会自动播放。** **Disable auto-play** 已打开。在以下位置关闭它 **General** 轮播设置的面板。
- **没有箭头。** **Next/Previous** 默认关闭。在以下位置打开它 **Next/Previous** 面板。
- **轮播在选择器的 Layout 选项卡中缺失。** DXPR Builder 用户资料省略它。管理员勾选 **Carousel** 在 **Elements** 在您的资料中，位于 `/admin/dxpr_studio/dxpr_builder/profile`.

## 接下来做什么？

- [图像轮播](/hc/documentation/learn-dxpr-builder/elements/image-carousel)：纯图像轮播，在一个对话框中设置。
- [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)：让访客选择内容，而非等待。
- [动画选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)：为每张幻灯片的内容添加进入效果。