我正在尝试添加 amp-base-carousel 但它没有显示其内容

如何解决我正在尝试添加 amp-base-carousel 但它没有显示其内容

我正在尝试添加 amp-base-carousel，但它根本没有显示其内容。当我在开发人员工具中看到轮播内的 div 具有 display:none 属性时。请找到下面的屏幕截图和代码以供参考。请任何人都可以在这里提供帮助，让我知道我在这里做错了什么以及如何解决这个问题。提前致谢。

注意 - 我确实为 amp-base-caousel 添加了所需的 js 文件。

屏幕截图 1（在浏览器中不显示内容）

屏幕截图 2（轮播内 div 的 css 显示属性）

以下是我正在使用的代码，它基本上仅取自 AMP 网站，来自教程部分。

<amp-base-carousel id="my-carousel">
  <div class="red-gradient">1111</div>
  <div class="blue-gradient">2222</div>
  <div class="green-gradient">33333</div>
</amp-base-carousel>
<div class="buttons" style="margin-top: 8px;">
  <button id='prev-button'>Go to prevIoUs slide</button>
  <button id='next-button'>Go to next slide</button>
  <button id='go-to-button'>Go to slide with green gradient</button>
</div>

<script>
    const carousel = document.querySelector('#my-carousel');
    await customElements.whenDefined('amp-base-carousel');
    const api = await carousel.getApi();
    // programatically advance to next slide
    api.next();
    // set up button actions
    document.querySelector('#prev-button').onclick = () => api.prev();
    document.querySelector('#next-button').onclick = () => api.next();
    document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);
  
</script>

解决方法

您使用的组件版本仍处于实验模式。您可以enable AMP experiments，或转换为stable 0.1 version。

Here is a working example