How to Use the AMP Carousel Block

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

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.

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.