css - AMP 轮播箭头未在 IE 和 Safari 上显示

Question

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

问题是 AMP-carousel 在 IE 和 Safari 上运行不佳。看这里的官方例子https://ampbyexample.com/components/amp-carousel/当您在 IE 或 Safari 中看到它时，控制 slider 的箭头不会出现在第一张图像之后，这让我认为这是一个“官方”错误。

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

<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 中解决这个问题？

Answer 1

需要添加controls属性

controls (optional) : Displays left and right arrows for the user to navigate carousel items on mobile devices. The visibility of arrows can also be controlled via styling, and a media query can be used to only display arrows at certain screen widths. On desktop, arrows are always displayed unless only a single child is present.

代码:

<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>