not working as expected with dynamic data using

Question

我有我的HTML：

<amp-list height="400" layout="fixed-height" src="data.json">
   <template type="amp-mustache">
      <amp-carousel height="200" layout="fixed-height" type="carousel">
         <amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
      </amp-carousel>
   </template>
</amp-list>

哪个应显示带有我在data.json文件中指定的产品图像的轮播。但是，如果你看看我的页面here，它没有像我期望的那样运作。我尝试删除动态函数，它按预期工作，所以使用<amp-list>的东西令人困惑。我关注了AMP Project GitHub上的问题：here，here和here。

这是组件应该是什么样子：

https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive

这就是目前的情况：

https://www.perfectimprints.com/amp/product/offering-buckets/

任何见解都将非常感激。谢谢！

Answer 1

他们的关键是在single-item模式下使用amp-list，然后手动迭代不同的项目：

<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
  <template type="amp-mustache">
    <amp-carousel type="slides" layout="fill">
      {{#items}}
      <amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
      {{/items}}
    </amp-carousel>
  </template>
</amp-list>

另一个技巧是让放大器列表定义布局，然后使用填充布局和轮廓和图像。