How to Add Carousels to Your Emails

Enhance messages with an image slider

This article shows you how to configure an AMP Carousel block for an email template. 

Unlike most image sliders, this one works inside an email message and can be displayed by email clients that are AMP-friendly.

AMP content (in its current state of development) has a few limitations. We covered some pros and cons in a different article. That article showed you how to configure an accordion for email templates. We also showed you how to test email templates with AMP content. 

I won't repeat all that here. So, I'll assume you've read the background material and want to place this fascinating carousel block into a template. Here's how.

1. Review our instructions below for the carousel. 
2. Consider adding backup content for readers with devices that can't display AMP content. We show you one way. 

Get whitelisted

Dynamic content in an email template sounds great, but there's a challenge. Email templates with AMP content don't display properly in all email clients.

Based on our research, only four email clients (Gmail, Yahoo, Mail.ru, and FairEmail) support AMP messages. Plus, these clients must whitelist your tinyEmail sending address. Once whitelisted, readers with these email clients can properly experience AMP content in your messages.

If the sending address is not whitelisted, AMP components in your emails won't display.

• Click here to learn how to get a sending email address whitelisted by these email clients.

Adding a carousel 

Still want to build an email template with a carousel? Here's how.

Open a template and place a Carousel block in a structure. Click the structure to make it the active layer. Go to the side panel and add images. Customize the slide image with alt text and links (see below). That's optional.

Configure carousel action

These options let you control the movement of images inside the carousel.

Click the Carousel block one time to make it the active layer. Go to the side panel and customize the Autoplay and Loop options (off by default). If you enable Autoplay, set the start delay (in seconds). The default is a two-second delay.

Display preview

This option displays thumbnails on the carousel. The preview is on by default, which you can disable by switching off the toggle.

There are several customization options in the side panel, including:

• location of the preview (on top or below slider images)
• thumbnail width (switch on the Custom preview toggle)
• outline style of active and inactive slides