Añade un diseño de carrusel.

Learn DXPR BuilderBuild pagesAdd contentLay-out

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.

Un deslizador de citas de estudiantes sobre una banda gris clara que muestra la cita de Aisha Khan, con una barra por cada una de sus tres diapositivas

  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.

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?