AMP

amp-carousel

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
  • carrossel: fixed, fixed-height e nodisplay.
  • slides: fill, fixed, fixed-height, flex-item, nodisplay e responsive.
ExemplosNo 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.

Mostrar código completo

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.

Mostrar código completo

Atributos

typeEspecifica o tipo de exibição para os itens do carrossel, que podem ser:
  • carousel (padrão): todos os slides são mostrados e podem ser rolados no sentido horizontal. Esse tipo aceita somente os seguintes layouts: fixed, fixed-height e nodisplay.
  • slides: mostra um único slide por vez. Esse tipo aceita os seguintes layouts: fill, fixed, fixed-height, flex-item, nodisplay e responsive.
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:
  • Por padrão, avança um slide em intervalos de 5.000 milissegundos (5 segundos). Pode ser substituído pelo atributo delay.
  • Anexa o atributo loop a amp-carousel se loop ainda não estiver presente.
  • Requer pelo menos dois slides para que a reprodução automática ocorra.
  • Aplicável apenas a carrosséis com type=slides.
Se está presente com um valor:
  • Anexa o atributo loop a `amp-carousel` se loop ainda não estiver presente.
  • Remove o atributo loop depois que o número requisitado de loops é feito.
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
Mostrar código completo
common attributesEste 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.

Precisa de mais ajuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub