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.



Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: