Interactive content isn't just for websites anymore. Including JavaScript to create interactive features will cause your email to go undelivered — with AMP for Email, you can build engaging carousels that allow users to swipe or click through multiple images or content sections directly inside the email itself. Carousels are an excellent way to highlight products, show off event photos, or guide readers through a visual story — all without needing JavaScript.
What is a Carousel
A carousel, sometimes called a "slider," is a collection of images or content panels that rotate horizontally. Users can click navigation arrows, swipe on mobile, or autoplay through the slides.
In AMP for Email, carousels are powered by the <amp-carousel> component — a lightweight, responsive solution designed specifically for interactive content inside emails.
This is an example built on bootstrap.css
Why Use a Carousel in AMP Email?
Here are a few good reasons to include carousels in your next email:
- Space Efficiency: Carousels allow you to show multiple pieces of content in the space of one.
- Visual Engagement: Eye-catching images and animations drive reader interaction.
- Mobile Friendly: AMP carousels are fully swipeable on mobile devices.
- Higher Clickthrough Rates: Interactive carousels often outperform static banners in emails.
| Use Case | Example |
|---|---|
| Product Highlights | Show off multiple products |
| Event Promotions | Rotate through event sessions |
| Portfolio Samples | Showcase design work or case studies |
| Testimonials | Rotate customer quotes visually |
How AMP Carousels Work
The AMP team provides a flexible <amp-carousel> element.
Inside the <amp-carousel> element you can include:
<amp-img>for images (<img> is disallowed in AMP!).<div>and other elements for your custom content.
✅ AMP automatically handles the sliding animation.
✅ No extra JavaScript or plugins are needed.
Step-by-Step Example: Basic AMP Carousel
1. Include the required AMP component
In your email's <head>, you must include the amp-carousel script:
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
2. Basic Carousel Markup
Here is a fully working AMP carousel you can plug into the <body> of your email.
<amp-carousel width="700" height="450" layout="responsive" type="slides">
<amp-img src="https://www.google.com/images/background/p1.jpg" width="700" height="450"
layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://www.google.com/images/background/p2.jpg" width="800" height="600"
layout="responsive" alt="a sample image"></amp-img>
<amp-img src="https://www.google.com/images/background/p3.jpg" width="700" height="450"
layout="responsive" alt="another sample image"></amp-img>
<amp-img src="https://www.google.com/images/background/p4.jpg" width="700" height="450"
layout="responsive" alt="and another sample image"></amp-img>
<amp-img src="https://www.google.com/images/background/p5.jpg" width="700" height="450"
layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>
✅ Users can swipe or click through the slides.
✅ Works on desktop, tablet, and mobile.
Key Notes to Remember
- Types of Carousels:
type="slides": A traditional sliding effect (good for email).type="carousel": Infinite looping carousel (not always ideal for email; use carefully).- Sizing:
- You must define
width,height, andlayout="responsive"for each<amp-img>. - Accessibility:
- Always use the
altattribute on images for screen readers. - Autoplay:
- Autoplay is not recommended for email carousels — it can be jarring for users and is sometimes blocked.
Final Tip
Keep the number of slides small (3–5 is ideal) to avoid overwhelming the reader or slowing down the email load time. High-quality images (optimized for web) will make your carousel feel more professional and snappy.
Want to test your carousel before you send it?
Try it in the AMP Playground to preview the swipe experience!
Download the carousel template and test it out in the AMP playground!
Next Topics
- How to Create a working form in AMP for Email
- Create a real working loan calculator