AMP

amp-carousel

Carrusel genérico que muestra varios fragmentos de contenido similares en un eje horizontal; es muy flexible y eficaz.

Secuencia de comandos obligatoria<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Diseños admitidos
  • carousel: fixed, fixed-height y nodisplay
  • slides: fill, fixed, fixed-height, flex-item, nodisplay y responsive
EjemplosEjemplos de AMP By Example:

Comportamiento

Cada uno de los elementos secundarios inmediatos de amp-carousel se considera un elemento del propio carrusel. Cada uno de estos nodos también puede tener elementos secundarios HTML arbitrarios.

El carrusel está formado por un número arbitrario de elementos, así como por flechas de navegación opcionales para avanzar o retroceder de un elemento a otro.

El usuario puede desplazarse por los elementos deslizando el dedo, utilizando las teclas de flecha o haciendo clic en una flecha de navegación opcional.

Mostrar código completo

Avanzar a una diapositiva concreta

Si se configura un método tap:carousel-id.goToSlide(index=N) para el atributo on de un elemento, un carrusel con el ID "carousel-id" se desplazará a la diapositiva index=N si el usuario toca o hace clic en él (la primera diapositiva se encuentra en index=0; la segunda diapositiva, en index=1, etc.).

En el siguiente ejemplo, tenemos un carrusel de tres imágenes con botones de vista previa justo debajo. Cuando un usuario hace clic en uno de los botones, se muestra el elemento de carrusel correspondiente.

Mostrar código completo

Atributos

typeEspecifica la forma en la que se muestran los elementos del carrusel, que puede ser:
  • carousel (predeterminado): se muestran todas las diapositivas y el usuario se puede desplazar por ellas de forma horizontal. Este tipo solo admite los siguientes diseños: fixed, fixed-height y nodisplay.
  • slides: muestra una sola diapositiva a la vez. Este tipo admite los siguientes diseños: fill, fixed, fixed-height, flex-item, nodisplay y responsive.
height (obligatorio)Define la altura del carrusel en píxeles.
controls (opcional)Muestra de forma permanente las flechas para que el usuario pueda desplazarse hacia la izquierda y hacia la derecha por los elementos del carrusel en los dispositivos móviles. De forma predeterminada, las flechas de navegación desaparecen al cabo de unos segundos en estos dispositivos. La visibilidad de las flechas también se puede controlar mediante las opciones de estilo, y se puede utilizar una media query para que se muestren las flechas solo cuando la pantalla tenga determinadas anchuras. En los ordenadores, las flechas se muestran siempre, a menos que solo haya un elemento secundario.
data-next-button-aria-label (opcional)Define el atributo aria-label de amp-carousel-button-next. Si no se especifica ningún valor, aria-label cambia de forma predeterminada al siguiente elemento del carrusel.
data-prev-button-aria-label (opcional)Define el atributo aria-label de amp-carousel-button-prev. Si no se especifica ningún valor, aria-label cambia de forma predeterminada al anterior elemento del carrusel.
data-button-count-format (opcional)Cadena de formato similar a (%s of %s), utilizada como sufijo de la aria-label para amp-carousel-button-next o amp-carousel-button-prev. Proporciona información a los usuarios que utilizan un lector de pantalla sobre su ubicación en el carrusel. Si no se especifica ningún valor, el valor predeterminado es "(%s of %s)".
autoplay (opcional)Avanza a la siguiente diapositiva sin la interacción del usuario.
Si está presente sin un valor:
  • De forma predeterminada, avanza a la siguiente diapositiva en intervalos de 5000 milisegundos (5 segundos). Se puede anular mediante el atributo delay.
  • Añade el atributo loop a amp-carousel si loop aún no está presente.
  • Se necesitan al menos 2 diapositivas para que funcione la reproducción automática.
  • Solo se aplica a los carruseles con type=slides.
Si está presente con un valor:
  • Añade el atributo loop a amp-carousel si loop aún no está presente.
  • Elimina el atributo loop después de que se haya realizado el número de bucles especificado.
delay (opcional)Especifica la duración (en milisegundos) que se tarda en avanzar a la siguiente diapositiva cuando se habilita autoplay. El atributo delay solo se aplica a los carruseles con type=slides.
loop (opcional)Permite al usuario avanzar más allá del primer elemento o del último. Debe haber al menos 3 diapositivas para que se produzca el bucle. El atributo loop solo se aplica a los carruseles con type=slides. Ejemplo: Muestra un carrusel de diapositivas con controles, bucles y reproducción automática retrasada (es decir, con delay).
Mostrar código completo
atributos comunesEste elemento incluye atributos comunes que se aplican a los componentes de AMP.

Estilo

  • Puedes utilizar el selector de elementos de amp-carousel para aplicar un estilo al carrusel.
  • Puedes usar el selector de clases de .amp-carousel-slide para hacer referencia a elementos del carrusel.
  • Los botones de amp-carousel permanecen ocultos cuando están inhabilitados.
  • De forma predeterminada, .amp-carousel-button utiliza un SVG insertado como imagen de fondo de los botones. Puedes anular esta opción con tu propio SVG o tu propia imagen, como en el siguiente ejemplo.

Ejemplo: SVG insertado predeterminado de .amp-carousel-button

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

Ejemplo: Se anula el SVG insertado predeterminado de .amp-carousel-button

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

Validación

Consulta las reglas de amp-carousel en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub