AMP 轮播箭头未在 IE 和 Safari 上显示答案

【问题标题】：AMP-carousel arrows not showing on IE and SafariAMP 轮播箭头未在 IE 和 Safari 上显示
【发布时间】：2021-11-30 15:17:19
【问题描述】：

我正在我的一个页面上实施 AMP 轮播。我打算为移动和桌面使用 amp 页面，因为我的网站相对简单，不需要两个不同的版本。

问题是 AMP 轮播在 IE 和 Safari 上无法正常运行。看看这里的官方示例https://ampbyexample.com/components/amp-carousel/ 当您使用 IE 或 Safari 看到它时，控制滑块的箭头不会出现在第一张图片之后，这让我认为这是一个“官方”错误。

我在我的页面中使用了这个例子：

<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="/img/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="/img/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="/img/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>

有没有办法在 IE 和 Safari 中解决这个问题？

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？这是我的页面：stage.goodsportcelebrates.com/photos/movember
不，我没有。我唯一能想到的就是用另一个应该与 AMP 配合使用的纯 CSS 滑块替换滑块。
你们俩还没有解决办法吗？如果是，请告诉我们。

标签： css amp-html

【解决方案1】：

你需要添加controls属性

控件（可选）：显示左右箭头，供用户在移动设备上导航轮播项目。箭头的可见性也可以通过样式控制，媒体查询可以用于仅在特定屏幕宽度上显示箭头。在桌面上，除非只有一个孩子，否则总是会显示箭头。

代码：

<amp-carousel controls width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="/img/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="/img/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="/img/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>

【讨论】：

【解决方案2】：

如果您的箭头消失了，那么您需要在 amp-carousal 中添加 controls 属性。

<amp-carousel height="300" layout="responsive" type="slides" controls>
.
.
</amp-carousel>

【讨论】：