放大器旋转木马箭头标记在移动版本中消失几秒钟后

时间:2018-05-14 10:42:04

标签: amp-html

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

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

AMP移动旋转木马箭头标记在移动版本中几秒后消失。

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

find attachment with AMP carosuel arrow

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

1 个答案:

答案 0 :(得分:3)

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>
  

控件(可选)

     

显示用户的左箭头和右箭头,以便在移动设备上导航轮播项目。箭头的可见性也可以通过样式来控制,并且媒体查询可以用于仅显示特定屏幕宽度的箭头。在桌面上,除非只有一个孩子,否则始终显示箭头。