Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt
  • websites

amp-carousel

Открыть в песочнице

Introduction

The amp-carousel component allows displaying multiple similar pieces of content along a horizontal axis.

Setup

Import the carousel component in the header.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Basic Usage

Use type="carousel" to display a list of images as a continuous strip.

a sample image 
<amp-carousel height="300"
  layout="fixed-height"
  type="carousel"
  role="region"
  aria-label="Basic usage carousel">
  <amp-img src="/static/samples/img/image1.jpg"
    width="400"
    height="300"
    alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg"
    width="400"
    height="300"
    alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg"
    width="400"
    height="300"
    alt="and another sample image"></amp-img>
</amp-carousel>

Slides

Use type="slides" to display a list of images as slides.

<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides"
  role="region"
  aria-label="type='slides' carousel">
  <amp-img src="/static/samples/img/image1.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="and another sample image"></amp-img>
</amp-carousel>

Autoplay

The autoplay attribute (type="slides" only) advances the slide to the next slide without user interaction, by default it will advance a slide in 5000 millisecond intervals (5 seconds) and can be overridden by the delay attribute.

<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides"
  autoplay
  delay="2000"
  role="region"
  aria-label="Carousel with autoplay">
  <amp-img src="/static/samples/img/image1.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="and another sample image"></amp-img>
</amp-carousel>

Buttons

By default, carousel buttons use inlined SVGs as background-images.

You may override these with your own SVGs or images by using .amp-carousel-button-prev and .amp-carousel-button-next classes.

<amp-carousel id="custom-button"
  width="400"
  height="300"
  layout="responsive"
  type="slides"
  autoplay
  delay="2000"
  role="region"
  aria-label="Carousel with custom button styles">
  <amp-img src="/static/samples/img/image1.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg"
    width="400"
    height="300"
    layout="responsive"
    alt="and another sample image"></amp-img>
</amp-carousel>

Supported Contents

Each of these nodes may also have arbitrary HTML children.

This is a blue box.
This is a red box.
This is a green box. 
<amp-carousel height="300"
  layout="fixed-height"
  type="slides"
  role="region"
  aria-label="Carousel with arbitrary HTML content">
  <div>
    <div class="blue-box">
      This is a blue box.
    </div>
  </div>
  <div>
    <div class="red-box">
      This is a red box.
    </div>
  </div>
  <div>
    <div class="green-box">
      This is a green box.
    </div>
  </div>
</amp-carousel>

A good use case for amp-carousel are image galleries, here are some examples.

Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub