---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
title: 'Añade un diseño de carrusel | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:55:57+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Usa el elemento de diseño Carrusel cuando quieras que el contenido se turne en un mismo sitio, como citas, ofertas o avisos. Terminas con diapositivas que avanzan solas, con un punto por cada diapositiva. A diferencia del carrusel de imágenes, cada diapositiva guarda cualquier elemento: texto, imágenes, botones y más. El ejemplo crea un deslizador de citas de estudiantes.'
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: 'Añade un diseño de carrusel'
      description: 'Usa el elemento de diseño Carrusel cuando quieras que el contenido se turne en un mismo sitio, como citas, ofertas o avisos. Terminas con diapositivas que avanzan solas, con un punto por cada diapositiva. A diferencia del carrusel de imágenes, cada diapositiva guarda cualquier elemento: texto, imágenes, botones y más. El ejemplo crea un deslizador de citas de estudiantes.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:55:57+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/es/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/layout/carousel-layout'
      description: 'Usa el elemento de diseño Carrusel cuando quieras que el contenido se turne en un mismo sitio, como citas, ofertas o avisos. Terminas con diapositivas que avanzan solas, con un punto por cada diapositiva. A diferencia del carrusel de imágenes, cada diapositiva guarda cualquier elemento: texto, imágenes, botones y más. El ejemplo crea un deslizador de citas de estudiantes.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/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) # Añade un diseño de carrusel.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Añadir un carrusel de imágenes](/es/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [Añade un panel de pestañas](/es/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [Animation tab](/hc/documentation/learn-dxpr-builder/design/animation-tab)

Usa el elemento de diseño Carrusel cuando quieras que el contenido se turne en un mismo sitio, como citas, ofertas o avisos. Terminas con diapositivas que avanzan solas, con un punto por cada diapositiva. A diferencia del [carrusel de imágenes](/es/hc/documentation/learn-dxpr-builder/elements/image-carousel), cada diapositiva guarda cualquier elemento: texto, imágenes, botones y más. El ejemplo crea un deslizador de citas de estudiantes.

## Añade un diseño de carrusel

1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de control para abrir el selector de elementos.
2. En la pestaña **Diseño**, haz clic en **Carrusel**.
3. Sus ajustes se abren primero. Haz clic en **Guardar** para conservar los valores por defecto. El carrusel aparece con una diapositiva vacía.
4. Haz clic en **+** dentro de la diapositiva y añade contenido, como un elemento **Texto**.
5. Para añadir una diapositiva, pasa el cursor sobre el carrusel y haz clic en **Añadir diapositiva** en su barra de control. Haz clic en el punto de la diapositiva debajo del carrusel para abrirla, y rellénala igual.

  ## Lo que ves

La primera diapositiva se muestra con una barra por cada diapositiva debajo. Cada 5 segundos entra la siguiente diapositiva, y tras la última vuelve la primera. Las personas visitantes pueden hacer clic en una barra para saltar a una diapositiva o deslizar en una pantalla táctil. Cada diapositiva toma la altura de la más alta, para que el contenido debajo del carrusel no salte.

## Configura tu carrusel

Abre los ajustes desde **Más** > **Ajustes** en la barra de control de **Carrusel**. El panel **General** guarda el ritmo.

| Ajuste | Efecto | Valor por defecto |
|---|---|---|
| **Fotogramas por diapositiva** | Cuántas diapositivas se muestran lado a lado, de 1 a 10. Las pantallas estrechas muestran menos, hasta una en teléfonos | 1 |
| **Desactivar reproducción automática** | Impide que las diapositivas avancen solas | Desactivado |
| **Intervalo de reproducción automática** | Tiempo entre diapositivas, de 1000 a 20000 milisegundos | 5000 |
| **Detener al pasar el cursor** | Pausa la reproducción automática mientras el puntero está sobre el carrusel | Desactivado |
| **Navegación por puntos** | En el panel **Puntos**: muestra un punto por cada diapositiva | Activado |
| **Siguiente/Anterior** | En el panel **Siguiente/Anterior**: muestra botones de flecha | Desactivado |

### Puntos y flechas

Con **Navegación por puntos** activada, el panel **Puntos** también ofrece:

- **Orientación de los puntos**: **Fuera del deslizador** (debajo) o **Dentro del deslizador**
- **Forma del punto**: **Barra**, **Círculo**, **Cuadrado** o **Triángulo**
- **Transformación del punto activo**: **Ninguna**, **Crecer en alto**, **Crecer en ancho** o **Agrandar**
- **Color del punto** y **Color del punto activo**

Con **Siguiente/Anterior** activado, el panel **Siguiente/Anterior** también ofrece:

- **Orientación**: **Fuera del deslizador** o **Dentro del deslizador**
- **Forma del punto**: el botón detrás de cada flecha, **Sin fondo**, **Círculo**, **Cuadrado** o **Barra**
- **Color del icono**, **Color del icono al pasar el cursor**, **Color de fondo** y **Color de fondo al pasar el cursor**
- **Posición exterior de la navegación**: **Adyacente**, **Arriba centrado**, **Arriba a la izquierda**, **Arriba a la derecha**, **Abajo centrado**, **Abajo a la izquierda** o **Abajo a la derecha**

## Ideas de diapositivas

- **Deslizador de testimonios**: pon un **cita en bloque** con la cita y un elemento **Texto** con el nombre en cada diapositiva. Mantén **Navegación por puntos** activada y **Siguiente/Anterior** desactivado, y pon el **Intervalo de reproducción automática** en 7000 para que las personas visitantes terminen de leer.
- **Carrusel hero**: abre **Más** > **Ajustes** de una diapositiva y elige una foto como **imagen de fondo** en su panel **Estilo**. Añade un elemento **Texto** con el encabezado y un **Botón**. Activa **Detener al pasar el cursor** para que las personas visitantes puedan leer y hacer clic.

## Si no lo ves

- **No hay puntos debajo del carrusel.** Los puntos solo aparecen cuando el carrusel tiene dos diapositivas, y solo con **Navegación por puntos** activada. Haz clic en **Añadir diapositiva** o activa **Navegación por puntos** en el panel **Puntos**.
- **La diapositiva nueva no aparece tras Añadir diapositiva.** Las diapositivas nuevas se añaden al final y quedan ocultas hasta que las abres. Haz clic en el último punto debajo del carrusel.
- **Las diapositivas no se mueven solas.** **Desactivar reproducción automática** está activado. Desactívalo en el panel **General** de los ajustes del carrusel.
- **No hay flechas.** **Siguiente/Anterior** está desactivado por defecto. Actívalo en el panel **Siguiente/Anterior**.
- **Carrusel no está en la pestaña Diseño del selector.** Tu perfil de usuario de DXPR Builder lo excluye. Una persona administradora marca **Carrusel** en **Elementos** de tu perfil, en `/admin/dxpr_studio/dxpr_builder/profile`.

## ¿Qué sigue?

- [Carrusel de imágenes](/es/hc/documentation/learn-dxpr-builder/elements/image-carousel): una presentación solo de imágenes, configurada en un diálogo.
- [Añadir un panel de pestañas](/es/hc/documentation/learn-dxpr-builder/layout/tabs-element): deja que las personas visitantes elijan el contenido en lugar de esperarlo.
- [Pestaña de animación](/hc/documentation/learn-dxpr-builder/design/animation-tab): añade efectos de entrada al contenido de cada diapositiva.