Componente de carrusel

El componente de carrusel de componentes principales permite al autor del contenido presentar el contenido en un carrusel navegable.

Uso

Con el componente Carrusel, el autor del contenido organiza el contenido en un carrusel rotatorio de diapositivas.

El cuadro de diálogo de edición permite al autor crear, nombrar y ordenar varias diapositivas, así como activar la transición automática con retraso. Mediante el cuadro de diálogo dediseño, el autor de la plantilla puede definir qué componentes se pueden agregar al carrusel, activar o desactivar transiciones automáticas y personalizar los estilos.

Versión y compatibilidad

La versión actual del componente Carrusel es v1, que se introdujo con la versión 2.2.0 de los componentes principales en octubre de 2018 y se describe en este documento.

En la tabla siguiente se detallan todas las versiones compatibles del componente, las versiones de AEM con las que las versiones del componente son compatibles y los vínculos a la documentación de versiones anteriores.

Versión del componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 Compatible Compatible Compatible

Para obtener más información sobre las versiones y versiones de los componentes principales, consulte las Versiones de los componentesprincipales de documento.

Ejemplo de salida de componente

Para experimentar el componente Carrusel y ver ejemplos de sus opciones de configuración, así como los resultados HTML y JSON, visite la biblioteca decomponentes.

Detalles técnicos

La documentación técnica más reciente sobre el componente Carrusel puede encontrarse en GitHub.

Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentesprincipales.

Edit Dialog

El cuadro de diálogo de edición permite al autor del contenido agregar, cambiar el nombre y reorganizar diapositivas, así como definir la configuración de transición automática.

Ficha Elementos

Ficha Elementos del cuadro de diálogo de edición del componente Carrusel

Utilice el botón Añadir para abrir el selector de componentes y elegir qué componente agregar como ficha. Una vez agregada, se agrega una entrada a la lista, que contiene las siguientes columnas:

  • Icono : icono del tipo de componente de la ficha para facilitar la identificación en la lista. Pase el ratón por encima para ver el nombre completo del componente como información sobre herramientas.
  • Descripción : la descripción utilizada como texto de la ficha, de forma predeterminada según el nombre del componente seleccionado para la ficha.
  • Eliminar : toque o haga clic para eliminar la ficha del componente de fichas.
  • Reordenar : toque o haga clic y arrastre para ordenar las fichas.
CONSEJO

Si se reduce la ventanilla de la página para que el cuadro de diálogo de edición se muestre a pantalla completa, se ocultará el botón Añadir . Los componentes se pueden añadir al componente Carrusel arrastrándolos desde el navegador de componentes y colocándolos en el componente Carrusel en el editorde páginas.

Ficha Propiedades

Ficha Propiedades del cuadro de diálogo de edición del componente Carrusel

En la ficha Propiedades , el autor del contenido puede establecer la transición automática de las diapositivas.

  • transición automática de diapositivas : al activarse, el componente avanzará automáticamente a la siguiente diapositiva tras un retraso especificado.
  • Retraso de Transición: cuando se selecciona transición automática de diapositivas, este valor se utiliza para definir el retraso entre transiciones (en milisegundos).
  • Deshabilitar la pausa automática al pasar el ratón por encima: cuando se selecciona la transición automática de diapositivas , la transición de carrusel se pausa automáticamente cada vez que el cursor se sitúa sobre el carrusel. Seleccione esta opción para que la transición no se detenga.
  • ID : Esta opción permite controlar el identificador único del componente en el HTML y en la capa dedatos.
    • Si se deja en blanco, se genera automáticamente una ID única para usted y se puede encontrar inspeccionando la página resultante.
    • Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
    • Cambiar el ID puede tener un impacto en el seguimiento de CSS, JS y de la capa de datos.
Nota

Los controles de avance de diapositivas no están activados en el modo de edición . Utilice el modo de Previsualizacióno la opción Vista como publicada​para interactuar con el carrusel como un lector del contenido publicado.

La función de avance automático no está habilitada en el modo Editar . Utilice la opción Vista como publicada​para ver la función de avance automático como un lector del contenido publicado.

Ficha Accesibilidad

Ficha Accesibilidad del cuadro de diálogo de edición del componente Carrusel

En la ficha Accesibilidad , se pueden definir valores para las etiquetas de accesibilidad de ARIA para el componente.

  • Etiqueta : valor de un atributo de etiqueta ARIA para el componente

Select Panel

El autor del contenido puede utilizar la opción Seleccionar panel de la barra de herramientas del componente para cambiar a una diapositiva diferente para editarla, así como para reorganizar fácilmente el orden de las diapositivas.

Icono Seleccionar panel

Una vez seleccionada la opción Seleccionar panel en la barra de herramientas de componentes, las diapositivas configuradas se muestran como una lista desplegable.

  • La lista se ordena según la disposición asignada de las diapositivas y se refleja en la numeración.
  • El tipo de componente de la diapositiva se muestra primero, seguido de la descripción de la diapositiva en una fuente más clara.

Seleccione el panel

  • Al tocar o hacer clic en una entrada de la lista desplegable, se cambia la vista del editor a esa diapositiva.
  • La diapositiva se puede reordenar en su lugar mediante los controladores de arrastre.

Cuadro de diálogo Diseño

El cuadro de diálogo de diseño permite al autor de la plantilla definir qué componentes se pueden añadir como diapositivas al componente de carrusel, así como definir los valores predeterminados de transición automática y qué estilos personalizados están disponibles para el autor del contenido.

Ficha Propiedades

La ficha Propiedades se utiliza para definir la configuración predeterminada de las transiciones de diapositivas cuando un autor de contenido agrega el componente carrusel a una página.

Cuadro de diálogo Diseño del componente Carrusel

  • transición automática de diapositivas : define si, de forma predeterminada, la opción para avanzar automáticamente el carrusel a la siguiente diapositiva está activada cuando el autor del contenido agrega el componente de carrusel a una página.
  • Retraso de Transición: define el valor predeterminado del retraso de transición entre diapositivas (en milisegundos) cuando un autor de contenido agrega el componente de carrusel a una página.
  • Deshabilitar la pausa automática al pasar el ratón por encima: Define si, de forma predeterminada, la opción para desactivar la pausa automática de diapositivas está activada cuando el autor del contenido selecciona la transición automática de diapositivas .

Allowed Components Tab

La ficha Componentes ​permitidos se utiliza para definir qué componentes puede agregar el autor del contenido como diapositivas al componente de carrusel.

La ficha Componentes permitidos funciona del mismo modo que la ficha del mismo nombre al definir la política y las propiedades de un Contenedor de diseño en el Editor de plantillas.

Ficha Estilos

El componente Carrusel es compatible con el sistema deestilo AEM.

En esta página