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:
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!
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:
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:
Para obtener más información consulte la documentación de referencia del componente amp-carousel.
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.