在AMP4HTML中使用amp-list创建动态amp-carousel

<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-list-0.1.css">
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-carousel-0.2.css">

<amp-list width="auto" height="200" layout="fixed-height" src="your-data-source-url" items="your-data-items">
  <template type="amp-mustache">
    <amp-carousel width="auto" height="200" layout="fixed-height" type="slides">
      {{#your-data-items}}
      <div>
        <img src="{{image-url}}" alt="{{image-alt}}">
        <p>{{caption}}</p>
      </div>
      {{/your-data-items}}
    </amp-carousel>
  </template>
</amp-list>

{
  "your-data-items": [
    {
      "image-url": "https://example.com/image1.jpg",
      "image-alt": "Image 1",
      "caption": "This is the first image"
    },
    {
      "image-url": "https://example.com/image2.jpg",
      "image-alt": "Image 2",
      "caption": "This is the second image"
    },
    {
      "image-url": "https://example.com/image3.jpg",
      "image-alt": "Image 3",
      "caption": "This is the third image"
    }
  ]
}