amp-carousel

0.2 0.1

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

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

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

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.