重要提示：此文档不适用于您当前选择的格式广告！

amp-image-slider

实验性

Bento

描述

用于比较两张图像的滑块。

必需脚本

AMP Bento（独立版）

<script async custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-1.0.js"></script>

<script async custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-image-slider-1.0.css">

支持的布局

fixed intrinsic nodisplay responsive

用法

amp-image-slider 组件需要正好两个 amp-img 元素作为其子元素。第一个子图像显示在左侧，第二个子图像显示在右侧。

amp-image-slider 组件还可以包含两个 <div> 元素，用作图像的标签。标签会覆盖在图像的顶部。左侧图像的标签需要 first 属性，而右侧标签需要 second 属性。默认情况下，标签显示在图像的左上角。

<amp-image-slider layout="responsive" width="100" height="200">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

滑块加载后，比较的图像将通过一个垂直条分隔开，滑块的中心会显示有用的箭头提示。

用户可以鼠标按下或触摸来将滑块移动到指针的位置，然后移动指针来左右拖动滑块条。对于左侧图像，仅显示条左侧的部分；类似地，对于右侧图像，仅显示右侧部分。

如果在 amp-image-slider 元素上指定了 tabindex，用户可以使用键盘导航滑块。按下向下、向左或向右箭头键会将滑块条朝相应的方向移动一步。按下 Home 键会将滑块移动到中心。按下 PageUp 或 PageDown 键会移动到滑块主体的左端或右端。

自定义标签

您可以通过提供自定义的 CSS 类来自定义标签。可以使用 top、right、bottom、left 和 transform: translate(...) 规则来控制它们的位置。可以使用其他规则，例如 border、background-color 等，来自定义标签的样式。

以下示例显示了一个图像滑块，左侧标签位于左上角，右侧标签位于右上角

<!-- head -->
<style amp-custom>
  .top-right {
    top: 0;
    right: 0;
  }
</style>

<!-- body -->
<amp-image-slider layout="responsive" width="100" height="200">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second class="top-right">This apple is red</div>
</amp-image-slider>

自定义提示

默认情况下，提示是一对带阴影的白色箭头。要自定义左右提示，可以覆盖 .amp-image-slider-hint-left 和 .amp-image-slider-hint-right 类。要用自定义图像替换箭头，请覆盖 background-image。要删除阴影，请设置 filter: none;。

以下示例将箭头替换为三角形

.amp-image-slider-hint-left {
  width: 10px;
  height: 20px;
  background-size: 10px 20px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
}

.amp-image-slider-hint-right {
  width: 10px;
  height: 20px;
  background-size: 10px 20px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
}

属性

`disable-hint-reappear`

一旦用户开始与滑块交互（例如，单击鼠标按钮、触摸滑块以及按下键来移动滑块），显示在垂直条中心的提示就会消失。如果提示离开视口然后再次返回，则会重新出现。要停止这种重新出现行为，请向图像滑块添加 disable-hint-reappear 属性。

以下示例显示了一个没有重新出现提示的图像滑块

<amp-image-slider
  layout="responsive"
  width="100"
  height="200"
  disable-hint-reappear
>
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

`initial-slider-position`

默认情况下，垂直滑块条位于滑块主体的中心。要将初始滑块位置移动到其他位置，请将 initial-slider-position 设置为 0 和 1 之间的值，对应于从左侧滑块边缘的 0% 到 100%。

以下示例显示了一个初始滑块位置位于左侧的图像滑块

<amp-image-slider
  layout="responsive"
  width="100"
  height="200"
  initial-slider-position="0"
>
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

`step-size`

当聚焦在滑块上时，每次按下向左和向右的键盘按钮，滑块条都会移动 10%。要使用不同的步长，请将 step-size 设置为 0 到 1 之间的值，对应于每次按键移动 0% 到移动 100%。

以下示例显示了一个步长为 25% 的图像滑块

<amp-image-slider layout="responsive" width="100" height="200" step-size="0.25">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

操作

`seekTo`

slider-id.seekTo(percent=[0,1]) 将相应滑块的条移动到从左侧开始给定的百分比。

版本说明

在 1.0 中完成了一些更新和更改，这与 0.1 版本略有不同。本节描述此更新和差异。

属性更新

`0.1` 参数	更新类型	`1.0` 参数	注释
`disable-hint-reappear`	已重命名	`display-hint-once`	目的是不要使用带有负名称的属性。

验证

请参阅 AMP 验证器规范中的 amp-image-slider 规则。

需要更多帮助？

您已经阅读过本文档十几次，但它并没有真正涵盖您的所有问题？也许其他人也有同样的感受：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您针对您特别感兴趣的问题进行一次性贡献。

转到 GitHub

amp-image-slider 1.0 0.1

描述