AMP图片轮播组件amp-carousel的使用方法

1,amp-carousel图片轮播组件简介

通用轮播,用于 灵活高效 沿水平轴显示多个相似的内容。

amp-carousel组件的每个直系子代都被视为该carousel中的一项。 这些节点中的每个节点也可以具有任意HTML子代。

轮播由任意数量的项目以及可选的前进或后退导航箭头组成。 对于type =“ slides”,点击箭头,一次切换一张图像。 对于type =“ carousel”,点击箭头一次将以 一个宽度 类似旋转木马向前或向后移动。

如果用户滑动或单击可选的导航箭头,则轮播会在项目之间前进。

2,一个简单的 amp-carousel 轮播demo

amp-carousel轮播示例
amp-carousel 轮播实现的效果

首先在amp网页<head>部分插入amp-carousel组件的js

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

然后添加 amp-carousel 轮播实现代码

<amp-carousel width="450" height="300" layout="responsive" type="slides"> <amp-img src="/img/1.jpg" width="800" height="500" ></amp-img> <amp-img src="/img/2.jpg" width="800" height="500" ></amp-img> <amp-img src="/img/3.jpg" width="800" height="500" ></amp-img> </amp-carousel>

以上 amp-carousel 示例的完整代码如下

<!doctype html> <html amp lang="zh-cn"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script> <title>你好AMP</title> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <amp-carousel width="450" height="300" layout="responsive" type="slides"> <amp-img src="/img/1.jpg" width="800" height="500" ></amp-img> <amp-img src="/img/2.jpg" width="800" height="500" ></amp-img> <amp-img src="/img/3.jpg" width="800" height="500" ></amp-img> </amp-carousel> </body> </html>

3,带缩略图预览的 amp-carousel 轮播

带预览缩略图的amp-carousel轮播
带预览缩略图的轮播

点击缩略图前进到特定的幻灯片

设置元素上的on属性的方法来点击:carousel-id.goToSlide(index = N),在用户点击或单击时,会将带有“ carousel-id” ID的轮播移到索引= N( 第一张幻灯片的索引为0,第二张幻灯片的索引为1,依此类推)。

在这个示例中,我们有一个包含三个图像的轮播,轮播下方有预览按钮。 当用户单击按钮之一时,将显示相应的轮播项目。轮播部分代码如下

<amp-carousel id="carousel-with-preview" width="450" height="300" layout="responsive" type="slides"> <amp-img src="/img/1.jpg" width="450" height="300" layout="responsive" alt="apples" ></amp-img> <amp-img src="/img/2.jpg" width="450" height="300" layout="responsive" alt="lemons" ></amp-img> <amp-img src="/img/3.jpg" width="450" height="300" layout="responsive" alt="blueberries" ></amp-img> </amp-carousel>
<div class="carousel-preview"> <button on="tap:carousel-with-preview.goToSlide(index=0)"> <amp-img src="/img/1.jpg" width="60" height="40" alt="apples" ></amp-img> </button> <button on="tap:carousel-with-preview.goToSlide(index=1)"> <amp-img src="/img/2.jpg" width="60" height="40" alt="lemons" ></amp-img> </button> <button on="tap:carousel-with-preview.goToSlide(index=2)"> <amp-img src="/img/3.jpg" width="60" height="40" alt="blueberries" ></amp-img> </button> </div>

4,amp-carousel轮播的属性列表

type 指定轮播项目的显示类型,可以是:
carousel (default):所有幻灯片均已显示并且可水平滚动。 每张幻灯片可以使用CSS指定不同的宽度。
slides:一次显示一张幻灯片,每张幻灯片在用户滑动时都会卡入到位。
controls
(optional)
永久显示向左和向右箭头,供用户浏览移动设备上的轮播项目。 默认情况下,在用户滑动到移动设备上的另一张幻灯片后,导航箭头消失。 箭头的可见性也可以通过样式进行控制,媒体查询可以仅用于显示特定屏幕宽度的箭头。 在桌面上,除非只有一个子元素,否则总是显示箭头。
data-next-button-aria-label
(optional)
设置amp-carousel-button-next的aria-label。 如果未提供任何值,则aria -label 默认为“轮播中的下一项”。
data-prev-button-aria-label
(optional)
设置amp-carousel-button-prev的aria-label标签。 如果未指定任何值,则aria-label 标签默认为“轮播中的上一项”。
data-button-count-format
(optional)
格式字符串,类似于(%s of%s),用作amp-carousel-button-next / amp-carousel-button-prev的aria-label的后缀。 这会向使用屏幕阅读器的用户提供有关轮播过程的信息。 如果没有给出值,则默认为’(%s of%s)’。
autoplay
(optional)
无需用户干预即可定期前进到下一张幻灯片。 如果用户手动更改幻灯片,则自动播放将停止。
如果存在而没有值:
默认情况下,以5000毫秒的间隔(5秒)前进一张幻灯片; 可以被delay属性覆盖。
至少需要2张幻灯片才能进行自动播放。
如果存在值:
完成必要的循环次数后,停止自动播放。
delay
(optional)
指定启用自动播放时延迟前进到下一张幻灯片的持续时间(以毫秒为单位)。
loop
(optional)
允许用户前进到第一项或最后一项。 必须至少有3张幻灯片才能发生循环。
slide
(optional)
指定首次渲染轮播时应显示什么索引。 可以使用amp-bind进行更新以更改显示的索引。

以下为一个带自动播放和延时属性的amp-carousel示例

<amp-carousel type="slides" width="450" height="300" controls loop autoplay delay="3000" data-next-button-aria-label="下一个" data-previous-button-aria-label="上一个"> <amp-img src="/img/1.jpg" width="450" height="300"></amp-img> <amp-img src="/img/2.jpg" width="450" height="300"></amp-img> <amp-img src="/img/3.jpg" width="450" height="300"></amp-img> </amp-carousel>