amp-html - 移动版中的放大器轮播箭头标记几秒钟后消失

Question

我正在尝试为我们的网站开发 AMP。

我的移动网站上的 AMP 轮播箭头出现问题。

在移动版本中，AMP 轮播箭头标记会在几秒钟后消失。

我想保持它显示。任何人都可以帮助我如何实现这一目标吗？

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>

Answer 1

添加controls参数到您的 <amp-carousel>标签强制控件保持可见，即使在移动设备上也是如此。

我在amp-playground上测试了这个而且它似乎强制控件保持可见，即使在移动设备上也是如此。

代码示例:

<amp-carousel
  width="450"
  height="300"
  controls
  layout="responsive"
  type="slides">
<amp-img src="https://www.abelandcole.co.uk/media/205_14408_z.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="apples"></amp-img>
<amp-img src="https://www.dailysignal.com/wp-content/uploads/Lemons4-1250x650.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="lemons"></amp-img>
<amp-img src="https://draxe.com/wp-content/uploads/2014/07/BlueberryBenefitHeader.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="blueberries"></amp-img>
</amp-carousel>

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.