AMP

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>

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.
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>
Abrir este trecho no playground

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>
Abrir este trecho no playground

Atributos

type Especifica 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
<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <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>
Abrir este trecho no playground
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.

Precisa de mais ajuda?

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