Contenido

Adición de carruseles

Otra característica común en las páginas móviles es un carrusel. Puede agregar fácilmente carruseles a las páginas de AMP utilizando el componente de amp-carousel. Comencemos con el ejemplo sencillo de un carrusel de imágenes.

Carrusel de imágenes sencillo

Recuerde incluir la biblioteca de componentes de amp-carousel agregando la siguiente solicitud de JavaScript a la etiqueta <head> de su documento:

<script
  async
  custom-element="amp-carousel"
  src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>

A continuación, insertaremos un carrusel de imágenes sencillo con un diseño de respuesta y un ancho y una altura predefinidos. Agregue lo siguiente a su página:

<amp-carousel layout="fixed-height" height="168" type="carousel">
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Actualice su página y deberá ver un carrusel en ella:

Simple images carousel

El componente amp-carousel puede configurarse de varias maneras. Cambiemos la interfaz de usuario para mostrar solo una imagen a la vez y hacer que el diseño del carrusel responda.

Para lograr esto, primero cambie el type del amp-carousel, de carousel a slides, cambie el layout a responsive establezca el width a 300 (asegurándose de que tiene tanto height como width definidos). Agregue el atributo "layout=responsive" a los hijos de amp-img en amp-carousel.

Vuelva a cargar su página. Ahora, en vez de una lista desplegable de elementos, verá un elemento a la vez. Trate de deslizarse horizontalmente para moverse entre los elementos. Si pasa al tercer elemento, no podrá desplazarse más.

A continuación, agregue el atributo loop. Actualice la página e inmediatamente trate de deslizarse hacia la izquierda. El carrusel girará sin cesar.

Por último, haremos que el carrusel se ejecute automáticamente cada 2 segundos. Agregue a amp-carousel el atributo autoplay y el atributo delay con un valor de 2000 (por ejemplo, delay="2000").

Su resultado final debe ser algo parecido a esto:

<amp-carousel
  layout="responsive"
  width="300"
  height="168"
  type="slides"
  autoplay
  delay="2000"
  loop
>
  <amp-img
    src="mountains-1.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
  <amp-img
    src="mountains-2.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
  <amp-img
    src="mountains-3.jpg"
    width="300"
    height="168"
    layout="responsive"
  ></amp-img>
</amp-carousel>

¡Actualice la página y vea cómo gira!

NOTA: Tal vez se dio cuenta de que cuando amp-carousel tenía el tipo carousel, usamos el tipo de disposición fixed-height. Los tipos de disposición compatibles con el tipo carousel son limitados, por ejemplo, el tipo carousel no es compatible con la disposición responsive. Como su nombre indica, los elementos de altura fija ocupan el espacio disponible, pero mantienen la altura sin cambios. Para los elementos de altura fija, debe definir el atributo height, mientras que el atributo width debe ser auto o no estar establecido.

Contenido mixto de carrusel

En primer lugar, vamos a añadir este estilo a la página para garantizar que el amp-fit-text y amp-carousel funcionan juntos con seguridad:

amp-fit-text {
  white-space: normal;
}

Ahora, reemplazar tu carousel simple con éste:

<amp-carousel layout="fixed-height" height="250" type="carousel">
  <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

  <amp-ad
    width="300"
    height="250"
    type="doubleclick"
    data-slot="/35096353/amptesting/image/static"
  >
    <div placeholder>This ad is still loading.</div>
  </amp-ad>

  <amp-fit-text width="300" height="250" layout="fixed">
    Big, bold article quote goes here.
  </amp-fit-text>
</amp-carousel>

Actualice la página y debería ver algo como ésto:

A carousel of mixed content

Para obtener más información consulte la documentación de referencia del componente amp-carousel.

NOTA: En nuestro último ejemplo, tal vez se dio cuenta de que el componente amp-ad incluía un elemento hijo div con el atributo placeholder. Anteriormente, en el tutorial, nos encontramos con un escenario similar con amp-ad al utilizar un fallback. ¿Cuál es la diferencia entre el marcador de posición y el fallback? Los elementos fallback aparecen cuando el elemento primario no se carga, es decir, si no hay ningún anuncio disponible. Mientras que los elementos placeholder aparecen en lugar del elemento principal mientras se está cargando. En cierto sentido, estos elementos son el final del proceso de carga del elemento padre. Puede obtener más información en la Guía Placeholders & fallbacks.

Capítulo anterior Siguiente capítulo