使用AMP列表在AMP4HTML中创建动态AMP-Carousel

Question

我想使用AMP列表为Amp4email创建动态AMP-Carousel。

我构建了一个模板，该模板在此处通过验证，但是将其放入https://amp.gmail.dev/playground/时，轮播不起作用。

Amp4email不可能吗？通常基于此基础在AMP中正常工作。

代码的一部分呈现轮旋

<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>

Answer 1

当您说"不起作用"时，您指的是旋转木马不显示吗？

您的代码(按原样(无法在AMP电子邮件游乐场(或在实际的AMP电子邮件中(工作，因为您的列表的SRC是https://amp-templates.com/templates/api/1.JSON"没有在其响应中寄回正确的CORS标头。尝试打开控制台和网络请求，您应该能够准确地看到我的意思。

由于SRC是遥远的，因此AMP规格执行了许多额外的安全要求，您必须遵守以获取JSON文件。电子邮件游乐场的标题可以在此处找到，而所需的标题的更完整列表在此处。

我能够通过自己托管JSON并将其添加到我的htaccess：

来确认此问题影响了您的代码。

# AMP
Header add Access-Control-Allow-Origin "*"
Header add AMP-Access-Control-Allow-Source-Origin "[e-mail]"
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"

我将其扔到临时主机上，网址为" https://fjas298401cxj.000webhostapp.com/amptemplates-api-1.json">

屏幕截图