amp-image-slider
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>
<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">
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