Adding carousels
Outra funcionalidade comum das páginas para dispositivos móveis são os carrosséis. Você 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 à tag <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 layout responsivo 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:
O componente amp-carousel pode ser configurado de várias formas. Vamos alterar a interface do usuário para mostrar apenas uma imagem de cada vez e deixar o layout do carrossel responsivo.
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 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!
amp-carousel tinha o tipo carousel, utilizamos o tipo de layout fixed-height. Os tipos de layout suportados para o tipo carousel são limitados. Por exemplo, o tipo carousel não suporta o layout responsive. Tal como o nome sugere, os elementos fixed-height ocupam o espaço disponível para os mesmos, mas mantêm a altura inalterada. Para elementos fixed-height, é necessário definir o atributo height, enquanto o atributo width deve estar definido como auto ou permanecer indefinido. 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 funcionem 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:
Para saber mais, consulte a documentação de referência do componente amp-carousel.
amp-ad incluía um elemento div secundário com o atributo placeholder. Anteriormente, no tutorial, encontramos com um cenário semelhante com o amp-ad usando um fallback. Qual é a diferença entre um placeholder e um fallback? 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 pai, enquanto este é carregado. De certo modo, estes elementos suportam o processo de carregamento do elemento pai. Para saber mais veja o guia Placeholders e fallbacks.