我正在尝试为我们的网站开发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>
答案 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>
控件(可选)
显示用户的左箭头和右箭头,以便在移动设备上导航轮播项目。箭头的可见性也可以通过样式来控制,并且媒体查询可以用于仅显示特定屏幕宽度的箭头。在桌面上,除非只有一个孩子,否则始终显示箭头。