• websites

Image Galleries with amp-carousel

Introduction

The amp-carousel component works great for image galleries. The carousel requires the height attribute to be specified in advance. This can be tricky if the displayed images and captions vary in size. Here are two approaches to solve this problem.

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>

We will be using the amp-fit-text component to fit captions to the available space.

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

Carousel previews can be implemented with amp-selector component.