amp-carousel
Description
Exibe vários conteúdos semelhantes em um eixo horizontal.
Required Scripts
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Supported Layouts
Um carrossel genérico para exibir vários conteúdos semelhantes em um eixo horizontal, que visa ser flexível e com excelente desempenho.
Script obrigatório | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
Layouts compatíveis |
|
Exemplos | No site AMP By Example: |
Comportamento
Cada filho imediato do componente amp-carousel
é considerado um item do carrossel. Cada um desses nós também pode ter filhos HTML arbitrários.
O carrossel consiste em um número arbitrário de itens, bem como setas de navegação opcionais para avançar ou voltar para um único item.
O carrossel avança entre os itens se o usuário deslizar o dedo, usar as teclas de seta ou clicar em uma seta de navegação opcional.
<amp-carousel width="450"
height="300">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="450"
height="300"></amp-img>
<amp-img src="/static/inline-examples/images/image2.jpg"
width="450"
height="300"></amp-img>
<amp-img src="/static/inline-examples/images/image3.jpg"
width="450"
height="300"></amp-img>
</amp-carousel>
Avançar para um slide específico
Definir um método para o atributo on
em um elemento tap:carousel-id.goToSlide(index=N)
, quando o usuário tocar ou clicar nele, avançará um carrossel com o código "carousel-id" para o slide em index=N (o primeiro slide está no index=0, o segundo no index=1 e assim por diante).
No exemplo a seguir, temos um carrossel de três imagens com botões de visualização abaixo do carrossel. Quando um usuário clica em um dos botões, o item correspondente do carrossel é exibido.
<amp-carousel id="carousel-with-preview"
width="450"
height="300"
layout="responsive"
type="slides">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="450"
height="300"
layout="responsive"
alt="apples"></amp-img>
<amp-img src="/static/inline-examples/images/image2.jpg"
width="450"
height="300"
layout="responsive"
alt="lemons"></amp-img>
<amp-img src="/static/inline-examples/images/image3.jpg"
width="450"
height="300"
layout="responsive"
alt="blueberries"></amp-img>
</amp-carousel>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="/static/inline-examples/images/image1.jpg"
width="60"
height="40"
alt="apples"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="/static/inline-examples/images/image2.jpg"
width="60"
height="40"
alt="lemons"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=2)">
<amp-img src="/static/inline-examples/images/image3.jpg"
width="60"
height="40"
alt="blueberries"></amp-img>
</button>
</div>
Atributos
type | Especifica o tipo de exibição para os itens do carrossel, que podem ser:
|
height (obrigatório) | Especifica a altura do carrossel, em pixels. |
controls (opcional) | Exibe permanentemente setas para a esquerda e para a direita, permitindo que o usuário navegue pelos itens do carrossel em dispositivos móveis. Por padrão, as setas de navegação desaparecem após alguns segundos no dispositivo. A visibilidade das setas também pode ser controlada por meio do estilo, e uma consulta de mídia pode ser usada para exibir setas somente em determinadas larguras de tela. No computador, as setas são sempre exibidas, a menos que apenas um filho esteja presente. |
data-next-button-aria-label (opcional) | Define o aria-label para amp-carousel-button-next . Se nenhum valor for fornecido, o padrão do aria-label será "Próximo item do carrossel". |
data-prev-button-aria-label (opcional) | Define o aria-label para amp-carousel-button-prev . Se nenhum valor for fornecido, o padrão do aria-label será "Item anterior do carrossel". |
data-button-count-format (opcional) | Uma string de formato parecida com (%s of %s) , usada como sufixo do aria-label para amp-carousel-button-next /amp-carousel-button-prev . Ela fornece aos usuários que utilizam um leitor de tela informações sobre a navegação pelo carrossel. Se nenhum valor for fornecido, o padrão será '(%s of %s)'. |
autoplay (opcional) | Avança para o próximo slide sem interação do usuário. Se estiver presente sem um valor:
|
delay (opcional) | Especifica a duração (em milissegundos) para atrasar o avanço para o próximo slide quando a autoplay está ativada. O atributo delay só é aplicável a carrosséis com type=slides . |
loop (opcional) | Permite que o usuário avance para o primeiro ou o último item. É necessário que haja pelo menos três slides para que o looping aconteça. O atributo loop só é aplicável a carrosséis com type=slides . Exemplo: exibição de um carrossel de slides com controles, looping e reprodução automática com atraso
|
common attributes | Este elemento inclui atributos comuns estendidos a componentes de AMP. |
Estilo
- Você pode usar o seletor de elemento
amp-carousel
para estilizá-lo à vontade. - Você pode usar o seletor de classe
.amp-carousel-slide
para segmentar itens do carrossel. - Quando o estado visual de um botão
amp-carousel
está desativado, ele fica oculto. - Por padrão, o
.amp-carousel-button
usa um SVG in-line como a imagem de plano de fundo dos botões. Você pode substituí-lo por seu próprio SVG ou imagem, como no exemplo abaixo.
Exemplo: SVG in-line padrão .amp-carousel-button
.amp-carousel-button-prev {
left: 16px;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}
Exemplo: substituição do SVG padrão in-line .amp-carousel-button
.amp-carousel-button-prev {
left: 5%;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}
Validação
Consulte as regras do amp-carousel (link em inglês) nas especificações do validador de AMP.
Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.
Ir para o Stack Overflow Encontrou um bug ou sente falta de um recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Ir para o GitHub