I want to use amp-list to create a dynamic amp-carousel for AMP4Email.
I built out a template that passes validation here, but when putting it into https://amp.gmail.dev/playground/, the carousel doesn't work.
Is this not possible with AMP4Email? It appears to work fine in AMP generally based on this.
The part of the code that renders the carousel
<amp-list src="https://amp-templates.com/templates/api/1.json"
layout="fixed-height"
height="400">
<template type="amp-mustache">
<amp-carousel id="links-carousel"
height="400"
layout="fixed-height"
type="slides">
{{#default}}
{{#images}}
<div>
<a href="{{link}}" class="carousel-link">
<amp-img
class="contain"
layout="fill"
src="{{image}}"
alt="photo courtesy of Unsplash"></amp-img>
<div class="caption">
<p>{{description}}</p>
</div>
</a>
</div>
{{/images}}
{{/default}}
</amp-carousel>
</template>
</amp-list>
When you say "doesn't work", are you referring to the carousel not showing up?
Your code, as-is, won't work in the AMP email playground (or in an actual AMP email), because the src of your list, "https://amp-templates.com/templates/api/1.json" is not sending back the right CORS headers in its response. Try opening the console and network requests, and you should be able to see exactly what I mean.
Since the src is remote, the AMP specs enforce a lot of extra security requirements that you must adhere to in order for the json file to be fetched. The headers for the email playground can be found here, whereas a more complete list of required headers is here.
I was able to confirm that this issue affected your code by hosting up the JSON myself, and adding this to my htaccess:
# AMP
Header add Access-Control-Allow-Origin "*"
Header add AMP-Access-Control-Allow-Source-Origin "[email protected]"
Header add Access-Control-Allow-Source-Origin "AMP-Access-Control-Allow-Source-Origin"
Header add access-control-expose-headers "AMP-Access-Control-Allow-Source-Origin"
I threw it up on a temporary host, at "https://fjas298401cxj.000webhostapp.com/amptemplates-api-1.json", which you can replace your src with to verify.
