When you have a gallery of multiple images that you can swipe left and right, the visual appeal increases, and the content becomes much more exciting. Some common instances you would have seen in website displays are: a product from many angles, different rooms/spaces of an accommodation, multiple tourist spots in a destination, cross-sell/up-sell of accessories for the main product, etc.
The element responsible for such a compelling display of pictures is called the image carousel. Imagine having the same experience in emails; it means a world of possibilities to make your email marketing highly engaging and interactive.
In an AMP email, you can create a gallery of moving images using a component called the amp-carousel.
1. What are the benefits of the amp-carousel component?
The amp-carousel component brings emails alive with an attractive display of content. You can create dynamic image carousels for:
- Optimally utilizing the limited content space
- Displaying multiple images in a single section
- Generating user interest and engagement
Here are a few ways to leverage the power of the amp-carousel in emails.
1.1. Boost user engagement
amp-carousel engages your audience better by adding an app-like experience to emails. You can build image slideshows for popular products, new collections, properties, listings, recipes, or discount offers to encourage user interaction within emails. The component also supports gamification in emails that can trigger quick user-response and uplift engagement metrics.
1.2. Showcase dynamic product portfolios
amp-carousel can dynamically upload personalized content and recommendations. You can design it to fetch and display updated content on product stocks, real estate listings, discounted sale items, and more. Emails with constantly updated information enhance user experience, drive interaction, and lead conversions.
1.3. Create interesting applications
Using amp-carousel, you can offer in-email searching or browsing experiences for users and eliminate exits to external webpages. You can significantly reduce user-drop offs and leakage of leads. A few examples of amp-carousel applications are:
- User-manuals with a sequence of illustrations
- Image-based puzzles revealing discount offers
- Informative catalogs for brand/product promos
- Multiple pictures that offer 360-degree views
2. How to use the amp-carousel component?
The amp-carousel component displays multiple, similar pieces of content along a horizontal axis.
Required Scripts: <script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>
Each of the amp-carousel component’s immediate children is considered an item in the carousel. Each of these nodes may also have arbitrary HTML children.
The carousel consists of an arbitrary number of items and optional navigational arrows to go forward or backward. The carousel advances between items if the user swipes or clicks an optional navigation arrow.
Setting a method for the on attribute on an element to tap:carousel-id.goToSlide(index=N) will, on user tap or click, advance a carousel with the “carousel-id” ID to the slide at index=N (the first slide is at index=0, the second slide is at index=1, and so on).
The type=”slides” designation on amp-carousel 0.1 supports fill, fixed, fixed-height, flex-item, nodisplay, and responsive layouts.
Publishers should be aware that while this mode explicitly supports fixed layout sizes, it also employs display: flex; in its styling. In other words, nested elements can have layout=fixed sizing, though, via styling, it only respects absolute width up to 100%. One way to work around this limitation is by using flex-shrink: 0 on any fixed layout slides.
For styling amp-carousel:
- You may use the amp-carousel element selector to style it freely.
- You may use the .amp-carousel-slide class selector to target carousel items.
- When disabled, the visual state of an amp-carousel button is hidden.
- By default, the .amp-carousel-button uses an inlined SVG as the background image of the buttons. You may override this with your SVG or image.
For an accessible and smooth user experience, when using type=”slides,” it is generally good practice that the carousel and all its children share the same dimensional ratios and layout type.
If you wish to learn more about the amp-carousel component for email, visit amp.dev.
3. Variations of the amp-carousel component
amp-carousel increases the engagement potential of AMP emails. You can use the component’s various attributes to create different results that enrich AMP emails. Let us find out more:
3.1. Slide or carousel display
You can choose how the carousel images display with the ‘type’ attribute.
For type=”slides,” the arrows move one item at a time. This type supports the following layouts: `fill,` `fixed,` `fixed-height,` `flex-item,` `nodisplay,` and `responsive.`
For type=”carousel,” the arrows move one carousel’s width forward or backward at a time. All slides are shown and are scrollable horizontally. This type supports only the following layouts: `fixed,` `fixed-height,` and `nodisplay.`
3.2. Autoplay
The autoplay attribute regularly advances the carousel to the next slide without user interaction. If the user manually changes slides, then autoplay is stopped.
If present without a value, the autoplay attribute:
- Advances a slide in 5000-millisecond intervals (5 seconds) by default
- Attaches the `loop` attribute to `amp-carousel` if `loop` is not already present
- Requires at least 2 slides for autoplay to occur
- Applies only to carousels with `type=slides`
If present with a value, the autoplay attribute:
- Attaches the `loop` attribute to `amp-carousel` if `loop` is not already present
- Removes the `loop` attribute after the requisite number of loops is made
3.3. Delay or loop transition
Both delay and loop attributes apply to carousels with type=slides.
The delay attribute specifies the duration (in milliseconds) to delay advancing to the next slide when autoplay is enabled. Note that the minimum allowed value for the delay is 1000 milliseconds.
You can use the loop attribute to let the user advance past the first or final item. There must be at least 3 slides for looping to occur.
Amp-carousel is frequently combined with the amp-anim and amp-list components to make the emails even more effective.
How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore Cloud, we help you set up and integrate AMP for email with the shortest TAT. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
Netcore Cloud works as an extension of your team to provide quick solutions. With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenues.
Connect with us to understand how you can benefit from our expertise and experience.
