Instrucciones ¿Cómo agregar amp-carousel?


amp-carousel


El componente amp-carousel permite visualizar múltiples piezas de contenido similares a lo largo de un eje horizontal.

Agregar

Importe el componente amp-carousel justo después de la apertura <head>.


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


Uso básico

Utilice type="carousel" para mostrar una lista de imágenes como una tira continua.


Ejemplo

<amp-carousel height="300"   layout="fixed-height"   type="carousel">   <amp-img src="/img/image1.jpg"     width="400"     height="300"     alt="a sample image"></amp-img>   <amp-img src="/img/image2.jpg"     width="400"     height="300"     alt="another sample image"></amp-img>   <amp-img src="/img/image3.jpg"     width="400"     height="300"     alt="and another sample image"></amp-img> </amp-carousel>

Utilice type="slides" para mostrar una lista de imágenes como diapositivas.


Ejemplo

<amp-carousel width="400"   height="300"   layout="responsive"   type="slides">   <amp-img src="/img/image1.jpg"     width="400"     height="300"     layout="responsive"     alt="a sample image"></amp-img>   <amp-img src="/img/image2.jpg"     width="400"     height="300"     layout="responsive"     alt="another sample image"></amp-img>   <amp-img src="/img/image3.jpg"     width="400"     height="300"     layout="responsive"     alt="and another sample image"></amp-img> </amp-carousel>

El atributo de reproducción automática (type=slides only) avanza la diapositiva a la siguiente diapositiva sin la interacción del usuario; por defecto, avanzará una diapositiva en intervalos de 5000 milisegundos (5 segundos) y puede ser anulada por el atributo de delay .


Ejemplo

<amp-carousel width="400"   height="300"   layout="responsive"   type="slides"   autoplay   delay="2000">   <amp-img src="/img/image1.jpg"     width="400"     height="300"     layout="responsive"     alt="a sample image"></amp-img>   <amp-img src="/img/image2.jpg"     width="400"     height="300"     layout="responsive"     alt="another sample image"></amp-img>   <amp-img src="/img/image3.jpg"     width="400"     height="300"     layout="responsive"     alt="and another sample image"></amp-img> </amp-carousel>

Contenido soportado

Cada uno de estos nodos también puede tener hijos HTML arbitrarios.


Ejemplo

This is a blue box.

This is a red box.

This is a green box.

<amp-carousel height="300"   layout="fixed-height"   type="slides">   <div>     <div class="blue-box"></div>     This is a blue box.   </div>   <div>     <div class="red-box"></div>     This is a red box.   </div>   <div>     <div class="green-box"></div>     This is a green box.   </div> </amp-carousel>

Un buen caso de uso para amp-carousel son las galerías de imágenes, aquí hay algunos ejemplos.




Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: