How to Use amp-carousel in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

3 mins read

Carousels show the content segments beautifully in a horizontal direction. But many people think that it is hard to incorporate such carousels in emails. Some even think of it as an impossible task to achieve.

It is possible and can be easily done with an AMP email component known as the amp-carousel.

This guide will teach you what an amp-carousel is and how to use it to show content along a horizontal axis in your AMP emails.

  • What is amp-carousel?

  • Applications of amp-carousel

  • Features of amp-carousel

  • Wrapping up

The amp-carousel is an AMP email component that displays content segments in a horizontal direction. This can benefit you in many ways as discussed in the applications section below, and you can also change carousel behavior with different attributes.

Amp-carousel in action in inbox.

Here are some scenarios where you can use amp-carousel:

Get the State of Email 2024 Report

150+ email experts share their email tips and secrets

1. Create Instagram-like carousels

Social media carousels are a trend nowadays and get more engagement than photos and videos. They are a great way to engage your audience and communicate huge amounts of information in bite-sized pieces. You can now create such carousels in your AMP emails with the help of amp-carousel. Just add the images and required code, and you can send interactive carousels straight to your users’ inboxes.

2. Show portfolio samples

If a client requested your portfolio samples, sure, you can send them as attachments in a static email. Another creative way to do this is to showcase your portfolio imagery in a carousel. You can achieve that with amp-carousel and send an interactive AMP email that will surely impress your clients.

3. Make product images dynamic

Do you sell a product and want your product images to be impactful? Then, make them dynamic with an amp-carousel. You can create beautiful product images with tools like Canva, and instead of showing them in a static manner, you can create dynamic carousels that amplify their impact.

The amp-carousel has many attributes you can use to create different carousel experiences. Here are the notable ones:

✅ Display one item at a time or multiple times

The type attribute lets you decide how carousel children are displayed. If you want your carousel to scroll smoothly in a horizontal direction, set the display type as a carousel. But if you want to display one child at a time, set slides as the display type.

The autoplay attribute allows users to move through the carousel without doing anything. The carousel will scroll on its own and you can set up the time interval between each item scrolling. If you don’t set that, it will fall back to its default settings.

✅ Delay the transition

The delay attribute lets users delay the carousel transition between each item. You have to set some time in milliseconds, and the carousel will wait for that amount of time between each item before moving on to the next one.

✅ Set the transition on loop

You can do this with the help of the loop attribute. The carousel will keep on looping once you add this attribute to your carousel. Users can still use arrows to move through the carousel as usual.

Note: The loop attribute only works if you have set your ‘display’ type as ‘slides’.

The other attributes available are: height, controls, data-next-button-aria-label, data-prev-button-aria-label, data-button-count-format, common attributes.

Visit amp.dev for more information.

Wrapping up

Carousels in emails open up many possibilities to show your content beautifully. And in this guide, you have learned how the amp-carousel helps you create great carousel experiences right inside your emails. Check out our guides on other AMP email components that will help you create high-converting AMP email campaigns.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What is amp-carousel?
Applications of amp-carousel
Features of amp-carousel
Wrapping up

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right