我们刚刚在 AMP 库中发布了一些小调整，这些调整可以极大地改善用户体验。
首先，一种新的 JavaScript 方法 (goToSlide) 支持在用户点击时将 <amp-carousel> 推进到特定幻灯片。这可以极大地增强图片库的 UX。其次，我们让使用 <amp-selector> 将图片缩略图集成到表单中变得更加容易。这对于许多开发者来说非常有用，他们可以向用户提供引人入胜的内容，例如图片丰富的新闻和电子商务产品页面。
使用 goToSlide 方法：带有缩略图的轮播
到目前为止，<amp-carousel> 尚未支持图片库的一些关键交互模式。用户如何知道此轮播中有多少张图片？如果他们想直接跳转到八张图片的轮播中的第五张图片怎么办？如果用户没有注意到箭头图标，或者如果该图标在页面上被隐藏，用户如何知道轮播是可以滑动的？
对于许多开发者和设计师来说，解决方案是向用户提供图片缩略图。点击这些缩略图会自动将轮播推进到特定幻灯片。
现在可以在 AMP 中使用 goToSlide 方法实现此功能。作为开发者，您可以在用户点击时触发此方法，以将幻灯片轮播推进到特定幻灯片。
示例实现
[code language=”html”]
<!– 主轮播 –>
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://example.com/path/to?image=10"
width="400"
height="300"
layout="responsive"
alt="示例图片"></amp-img>
<amp-img src="https://example.com/path/to?image=11"
width="400"
height="300"
layout="responsive"
alt="示例图片"></amp-img>
</amp-carousel>
<!– 轮播缩略图 –>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="https://example.com/path/to?image=10"
width="60"
height="40"
layout="responsive"
alt="示例图片"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="https://example.com/path/to?image=11"
width="60"
height="40"
layout="responsive"
alt="示例图片"></amp-img>
</button>
</div>
[/code]
如果您有很多图片，您甚至可以将缩略图放入一个更小的可滚动轮播中
此模式在整个网络中都会出现——电子商务网站可能会发现它在产品页面上特别有用。
使用 <amp-selector>：表单 + 图像缩略图
前两个示例重点介绍了图像对故事或沉浸式体验很重要的用例，但图像还可以帮助用户在填写表单时做出选择。使用 <amp-selector> 使此标记易于使用且语义一致。因此，用户可以在上下文中了解其表单选择。体验变得更具信息性、更具吸引力且更容易实现。
试试看！
要开始使用 <amp-selector> 和 goToSlide 方法，您可以查看文档 (goToSlide, <amp-selector>), 查看 AMP By Example 中的工作示例 (goToSlide, <amp-selector>), 并向我们反馈哪些有用，哪些没用 AMP GitHub 存储库。我们期待收到您的来信！
产品经理 Eric Lindley 发布