AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Adicionar carrosséis

Outra funcionalidade comum das páginas para dispositivos móveis são os carrosséis. Pode adicionar facilmente carrosséis a páginas AMP ao utilizar o componente amp-carousel. Vamos começar com um exemplo simples, como um carrossel de imagens.

Carrossel simples de imagens

Não se esqueça de incluir a biblioteca do componente amp-carousel ao adicionar o seguinte pedido de JavaScript à etiqueta <head> do seu documento:

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

Em seguida, vamos incorporar um carrossel simples de imagens com um esquema adaptável e largura e altura predefinidas. Adicione o seguinte à sua 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>

Atualize a página para ver um carrossel:

Carrossel de imagens simples

O componente amp-carousel pode ser configurado de várias formas. Vamos alterar a IU para mostrar apenas uma imagem de cada vez e tornar o esquema do carrossel adaptável.

Para o fazer, primeiro, altere o type do amp-carousel de carousel para slides, altere o layout para responsive e defina a width para 300 (assegure-se de que são definidas a height e a width). Adicione o atributo "layout=responsive" aos elementos secundários amp-img secundário do amp-carousel.

Atualize a página. Agora, em vez de uma lista de elementos para percorrer, verá um elemento de cada vez. Experimente deslizar rapidamente na horizontal para percorrer os elementos. Se deslizar rapidamente para o terceiro elemento, não poderá deslizar mais.

Em seguida, adicione o atributo loop. Atualize a página e tente deslizar rapidamente para a esquerda de imediato. O carrossel repete-se infinitamente.

Por último, vamos fazer com que este carrossel seja reproduzido automaticamente a cada 2 segundos. Adicione o atributo autoplay e o atributo delay com um valor de 2000 (por exemplo, delay="2000") ao amp-carousel.

O resultado final deverá ser semelhante ao seguinte:

<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>

Atualize a página e experimente!

Deverá ter reparado que, quando o amp-carousel tinha o tipo carousel, utilizámos o tipo de esquema fixed-height. Os tipos de esquema suportados para o tipo carousel são limitados. Por exemplo, o tipo carousel não suporta o esquema responsive. Tal como o nome sugere, os elementos de altura fixa ocupam o espaço disponível para os mesmos, mas mantêm a altura inalterada. Para elementos de altura fixa, tem de definir o atributo height, enquanto o atributo width deve estar definido como auto ou deve ser deixado por definir.

Conteúdo misto do carrossel

Os carrosséis de imagens são fantásticos. Mas, e se quisermos que apareçam conteúdos mais complexos no nosso carrossel? Vamos tentar misturar um pouco as coisas ao colocar um anúncio, algum texto e uma imagem, tudo num único carrossel. O amp-carousel conseguirá processar tudo isto de uma só vez? Sem dúvida!

Primeiro, vamos adicionar este estilo ao seu <style amp-custom> para assegurar que os componentes amp-fit-text e amp-carousel funcionam bem em conjunto:

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

Agora, substitua o seu carrossel simples pelo seguinte:

<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>

Atualize a página e deverá ver algo como isto:

Um carrossel de conteúdo misto

Para saber mais, consulte a documentação de referência do componente amp-carousel.

No nosso último exemplo, deverá ter reparado que o componente amp-ad incluía um elemento div secundário com o atributo placeholder. Anteriormente, no tutorial, deparámo-nos com um cenário semelhante com o amp-ad a utilizar um fallback. Qual é a diferença entre um marcador de posição e um alternativo? Os elementos fallback surgem quando ocorre uma falha ao carregar o elemento superior, ou seja, se não houver nenhum anúncio disponível. Os elementos placeholder aparecem em vez do elemento superior, enquanto este é carregado. De certo modo, estes elementos suportam o processo de carregamento do elemento superior. Pode saber mais no guia Marcadores de posição e alternativos.