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.

<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.
<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-
Written by @sebastianbenz