amp-image-slider

简介

使用 amp-image-slider 组件可以通过移动垂直滑动条来比较两张图片。用户可以单击/触摸并拖动来移动滑块以比较图像。

设置

在标头中导入 amp-image-slider 组件。

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

在此示例中，我们将创建一些用于定位标签的类。（我们将在下一节中重新讨论）

<style amp-custom>
  .label {
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
    width: 5rem;
    padding: 1rem 0;
    text-align: center;
    font-weight: bold;
  }
  .label-left-center {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
  }
  .label-right-center {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }
  .triangle-hint .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' /%3e%3c/svg%3e");
  }
  .triangle-hint .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' /%3e%3c/svg%3e");
  }
  .slider-no-display .amp-image-slider-hint-left, .slider-no-display .amp-image-slider-hint-right {
    display: none;
  }
  .seek-button-container {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }
</style>

基本用法

通过在内部放置 2 个 amp-img 来构建基本图像滑块。第一个 amp-img 将是左侧图像，第二个将是右侧图像。

<amp-image-slider width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

自定义文本标签

您可以通过提供额外的 div（分别使用 first 和 second 属性标记）来为图像添加可自定义的文本标签，分别用于左侧和右侧图像。您可以使用类自定义标签的样式和位置。例如，要在图像上垂直居中标签，可以使用 top/bottom 和 transform 规则。有关详细信息，请查看设置部分。

红色

绿色

<amp-image-slider width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
  <div first class="label label-left-center">Red</div>
  <div second class="label label-right-center">Green</div>
</amp-image-slider>

箭头提示

关于移动图像滑块的箭头提示默认情况下始终显示。一旦用户与滑块交互（例如单击和触摸），提示就会淡出。如果滑块离开视口并稍后再次返回，则提示会重新出现。要禁用此默认行为，请向滑块添加 disable-hint-reappear 属性。

<amp-image-slider width="300" height="200" layout="responsive" disable-hint-reappear>
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

自定义提示

通过覆盖 .amp-image-slider-hint-left 和 .amp-image-slider-hint-right 类，可以更改左侧和右侧提示图标的样式。特别是，您可以覆盖 background-image 以提供您自己的图标。

<amp-image-slider class="triangle-hint" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

隐藏提示

要隐藏提示，只需为这些类设置 display: none; 即可。

<amp-image-slider class="slider-no-display" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

操作

amp-image-slider 提供了一个操作 .seekTo(percent=[0-1])，可将滑块移动到从左侧算起的相应百分比位置。例如，您可以使用 slider-id.seekTo(percent=0) 和 slider-id.seekTo(percent=1) 将滑块移动到左右边界。

<amp-image-slider id="seekable" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>
<div class="seek-button-container">
  <button on="tap:seekable.seekTo(percent=1)">SHOW LEFT</button>
  <button on="tap:seekable.seekTo(percent=0)">SHOW RIGHT</button>
</div>

不同的初始位置

默认情况下，滑块栏最初将放置在滑块的中心。您可以使用 initial-slider-position 属性更改其初始位置。

<amp-image-slider width="300" height="200" layout="responsive" initial-slider-position="0.3">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

不同的步长

通过将 step-size 设置为 0 到 1 之间的值，您可以在滑块获得焦点时，每次按下左右箭头键时，以自定义百分比移动滑块栏。

<amp-image-slider tabindex="0" width="300" height="200" layout="responsive" step-size="0.2">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

无法解释的功能？

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

在 GitHub 上编辑示例

作者： @kevinkassimo