Search code examples
amp-html

Using amp-selector inside amp-carousel

I am trying to render multiple images using amp-selector inside amp-carousel but the images are not loading. If I try to have amp-carousel inside the amp-selector tag then the images are rendering but that is not my use case.

Can someone explain the issue and suggest another way?

<!doctype html>
  <html amp4email data-css-strict>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
    </style>
  </head>
  <body>
      <amp-carousel id="carousel-1" height="60" controls>
        <amp-selector layout="container" name="x1">
            <amp-img
                     alt="0" src="https://www.publicdomainpictures.net/fr/view-image.php?image=151128&picture=aurora-borealis-earth-magic"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/inde"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="2" src="https://pixabay.com/fr/images/search/nature/"
                     width="52"
                     height="52"
                     option="2"
                     ></amp-img>
        </amp-selector>
        <amp-selector layout="container" name="x1">
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/paris"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/inde"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="2" src="https://pixabay.com/fr/images/search/nature/"
                     width="52"
                     height="52"
                     option="2"
                     ></amp-img>
        </amp-selector>
      </amp-carousel>
  </body>
 </html>

Solution

  • You have couple of things done wrong. SRC attribute in AMP-IMG linked to the page, but not to the image, SRC attribute has to end with .jpg, .png, .svg etc... Second thing is that image width and height has to be same as image dimensions. Here is working example on codepen.