El componente amp-carousel crea un carrusel que permite mostrar varias imágenes. Puede personalizar la apariencia y el comportamiento del carrusel modificando sus propiedades.
Para usar el componente amp-carousel en su proyecto:
-
Abra el panel Componentes y, luego, la carpeta Galerías.
-
Arrastre el componente amp-carousel
a la escena.
-
En el panel Propiedades, busque la sección de propiedades del componente amp-carousel y asígnele un nombre en el campo Nombre.
-
En el campo Imágenes, añada imágenes a la galería mediante uno de los siguientes métodos:
- Haga clic en el botón Seleccionar imágenes de la galería
. Luego, haga clic en el botón Elegir imágenes para buscar archivos de imagen o arrástrelos directamente al cuadro de diálogo.
- Introduzca las URL de sus imágenes, separadas por comas.
- Haga clic en el botón Seleccionar imágenes de la galería
-
También puede ajustar otras propiedades del componente, tal y como se explica a continuación.
Vista de código
images, en lugar de incluirlas como elementos secundarios. De lo contrario, el código fuente del componente debería seguir la especificación oficial. El archivo publicado cumplirá por completo la especificación.Para reordenar o quitar imágenes del carrusel, siga estos pasos:
- En la sección de propiedades del componente amp-carousel, que se encuentra en el panel Propiedades, haga clic en el botón Seleccionar imágenes de la galería
- Arrastre una imagen a su nueva posición para reordenarla o coloque el cursor sobre una imagen y haga clic en el icono Eliminar imagen
para quitarla de la galería.
- Haga clic en Aceptar.
Propiedades
Puede cambiar la apariencia y el comportamiento del componente amp-carousel en el panel Propiedades.
| Propiedad | Descripción |
|---|---|
| Nombre | Nombre del componente amp-carousel. |
| Imágenes | URLs de las imágenes que se deben mostrar en el carrusel. |
| Tipo | Tipo de visualización:
|
| Reproducción automática |
Solo se aplica si el tipo asignado es diapositivas.
Marque esta casilla para pasar automáticamente a la siguiente imagen del carrusel sin ninguna interacción por parte del usuario. Debe haber al menos tres diapositivas para que se ejecute la reproducción automática. |
| Retraso |
Solo se aplica si el tipo asignado es diapositivas y si la reproducción automática está habilitada.
Intervalo de tiempo en milisegundos antes de avanzar a la siguiente diapositiva. El retraso predeterminado es de 5000 milisegundos (5 segundos). |
| Mostrar controles | Marque esta casilla para mostrar las flechas de izquierda y derecha y así permitir al usuario ver los elementos del carrusel en dispositivos móviles. En la versión para ordenadores, las flechas siempre se muestran en los carruseles con varios elementos. |
| Bucle |
Solo se aplica si el tipo asignado es diapositivas.
Marque esta casilla para permitir que se pueda seguir avanzando después de la primera diapositiva o de la última. El carrusel girará en bucle hasta el otro extremo. Debe haber al menos tres diapositivas para que se pueda aplicar el bucle. |
Eventos y acciones
Eventos que envía el componente amp-carouselPuede activar otras acciones basadas en los siguientes eventos del componente amp-carousel:
| Evento | Descripción |
|---|---|
| Cambio de diapositiva | Se envía cuando la diapositiva mostrada cambia. |
Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, asigne el componente amp-carousel al objetivo.
Las siguientes acciones del componente amp-carousel pueden activarse como respuesta a otros eventos:
| Acción | Opciones de configuración |
|---|---|
| Ir a la diapositiva |
|
Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, asigne el componente amp-carousel al receptor.
Obtenga información sobre cómo configurar eventos.
Vista previa
No se puede obtener una vista previa de este componente dentro de la interfaz de Google Web Designer. Para ver cómo funciona, obtenga una vista previa del documento en su navegador haciendo clic en el botón Vista previa 