AMP

amp-image-slider

Experimental
Bento

Description

A slider to compare two images.

 

Required Scripts

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

Supported Layouts

Usage

The amp-image-slider component requires exactly two amp-img elements as its children. The first child image displays on the left, the second child image displays on the right.

The amp-image-slider component can also contain two <div> elements to use as labels for the images. The labels are overlaid on top of the images. The label on the left image requires the first attribute, while the right label requires the second attribute. By default, the labels display at the top left corner of the image.

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

Once the slider is loaded, the compared images are separated by a vertical bar, with helpful arrow hints displayed at the slider's center.

Users can mouse down or touch to move the slider to the position of the pointer, and can then move the pointer to drag the slider bar left or right. For the left image, only the part that is left to the bar is displayed; similarly for the right image, to only display the right portion.

If you specify tabindex on the amp-image-slider element, users can navigate the slider with their keyboards. Pressing the down, left, or right arrow moves the slider bar one step towards the corresponding direction. Pressing the Home key brings the slider to the center. Pressing the PageUp or PageDown keys moves to the left or right end of the slider body.

Customize labels

You can customize your labels by providing customized CSS classes. You can use top, right, bottom, left and transform: translate(...) rules to control their positioning. Other rules, such as border, background-color, etc., could be used for customizing the style of your labels.

The following example displays an image slider with left label on top left, right label on top right:

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

Customize hints

By default, the hints are a pair of white arrows with drop shadow. To customize the left and right hints, you can override .amp-image-slider-hint-left and .amp-image-slider-hint-right classes. To replace the arrows with customized images, overwrite background-image. To remove drop shadow, set filter: none;.

The following example replace the arrows with triangles:

.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");
}

Attributes

disable-hint-reappear

The hints that shows at the center of the vertical bar will disappear once the user starts interacting with the slider (such as clicking the mouse button, touch the slider, and pressing keys to move the slider). The hints would reappear if it then leaves the viewport and goes back in again. To stop such reappearing behavior, add the disable-hint-reappear attribute to the image slider.

The following example displays an image slider without reappearing hints:

<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

The vertical slider bar sits at the center of the slider body by default. To move the initial slider position to a different place, set initial-slider-position to a value between 0 and 1, corresponding to 0% to 100% from the left slider edge.

The following example displays an image slider with initial slider position on the left:

<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

When focusing on the slider, left and right keyboard buttons move the slider bar by 10% each press. To use a different step size, set step-size to a value between 0 and 1, corresponding to moving 0% to moving 100% each key press.

The following example displays an image slider with step size of 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>

Actions

seekTo

slider-id.seekTo(percent=[0,1]) move the corresponding slider's bar to the given percentage from left.

Version Notes

Few updates and alteration are done in 1.0 which are a bit different from 0.1 version. This section describes this updates and differences.

Attributes Update

0.1 Parameter Update Type 1.0 Parameter Note
disable-hint-reappear Renamed display-hint-once The intention is to not have an attribute with a negative name.

Validation

See amp-image-slider rules in the AMP validator specification.

需要更多帮助?

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub