Guide7 min read

How to Use the AMP Carousel Block

MiN8T Team

Email Engineering

April 12, 2026

1 What is the Carousel Block?

The AMP Carousel block lets recipients swipe through multiple images directly inside their email. It's built on AMP's <amp-carousel> component and works in Gmail, Yahoo Mail, Mail.ru, FairEmail, and AOL.

Use cases:

Product galleries — show multiple angles of a product
Property listings — interior and exterior photos
Portfolio showcases — recent work samples
Before/after comparisons — transformation results
Promotional banners — rotating offers with per-slide links

In email clients that don't support AMP, the carousel renders as a static HTML fallback showing the first image (or all images stacked vertically).

2 Adding Slides

Drag the AMP Carousel block from the AMP section of the block palette into a container.

Per-Slide Configuration

Each slide has:

Image — upload or enter a URL. Supports drag-and-drop.
Alt text — accessibility description for the image
Link — per-slide destination URL (site link or custom). Each slide can link to a different product page.
Thumbnail color — fallback color shown before the image loads

Add more slides with the "+" button. Remove or reorder slides via the slide management panel. There's no hard limit on slide count, but 3–8 slides is optimal for engagement.

3 Carousel Settings

Autoplay — automatically advance slides at a configurable interval (delay in milliseconds)
Loop — when enabled (default), the carousel wraps from the last slide back to the first
Slide image fit — cover (fill the frame, may crop) or contain (show the full image, may letterbox)
General link — apply the same link to all slides (overrides per-slide links)
Slide radius — border radius for rounded corners on slides
Include In — both (AMP + HTML fallback), AMP only, or HTML only
Hide on Desktop / Mobile — responsive visibility toggles

4 Thumbnails

The carousel can display thumbnail navigation below the main slides:

Show thumbnails — toggle on/off
Thumbnail image fit — cover or contain
Size mode — auto (calculated) or custom pixel size
Alignment — left, center, or right
Spacing — gap between thumbnails (in pixels)
Active border — color and width for the currently selected thumbnail (default: 2px green)
Inactive border — color and width for non-selected thumbnails (default: 2px gray)

5 How It Exports

MiN8T generates dual output:

AMP Version

<amp-carousel type="slides" width="600" height="300"
              layout="responsive" loop autoplay delay="3000">
  <amp-img src="slide1.jpg" width="600" height="300"
           layout="responsive" alt="Product front"></amp-img>
  <amp-img src="slide2.jpg" width="600" height="300"
           layout="responsive" alt="Product side"></amp-img>
</amp-carousel>

HTML Fallback

For non-AMP clients, the first slide is rendered as a static image. The amp-carousel-0.2.js script is automatically injected into the AMP document head.

The carousel is interactive only in AMP-supporting email clients. In Outlook, Apple Mail, and other non-AMP clients, recipients see the static fallback image. Design your first slide to be the most important.

6 Next Steps

How to Test and Export AMP Emails — test your carousel in Gmail
AMP Email Whitelisting Guide — get approved to send AMP emails

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.