amp-carousel 组件

注意:此组件只能在 AMPHTML 广告中使用。

借助 amp-carousel 组件,您可以创建一个用于显示多张图片的轮播式图库。您可通过修改相应轮播式图库的属性自定义它的外观和行为。

amp-carousel 组件的呈现效果示例。

若想在您的项目中使用 amp-carousel 组件,请执行以下操作:

  1. 打开组件面板,然后打开图库文件夹。

  2. amp-carousel 组件拖动到场景中。

  3. 属性面板中,找到 amp-carousel 属性部分,然后在名称字段中为该组件命名。

  4. 图片字段中,使用下列方法之一向该图库添加图片:

    • 点击选择图库图片 按钮。您可以点击选择图片按钮来浏览图片文件,也可以直接将文件拖动到对话框中。
    • 输入所需图片的网址(用英文逗号分隔)。
  5. (可选)调整该组件的其他属性(如下文所述)。

代码视图

在代码视图中,amp-carousel 组件会将图片属性中的所有图片列在一个特殊的 Google Web Designer 属性 images 中,而不是将这些图片添加为子元素。另外,该组件的源代码应遵循官方规范(所发布的文件应完全遵循此规范)。

要重排或移除轮播式图库中的图片,请执行以下操作:

  1. 属性面板的 amp-carousel 属性部分,点击选择图库图片 按钮。系统随即会打开一个对话框,其中会列出轮播式图库中的图片。
  2. 要重排某张图片的顺序,请将其拖动到新位置;要从轮播式图库中移除某张图片,请将鼠标指针悬停在该图片上并点击删除图片 图标。
  3. 点击确定

属性

您可在“属性”面板中更改 amp-carousel 组件的外观和行为。

属性 说明
名称 amp-carousel 名称。
图片 要在轮播式图库中显示的图片的网址。
类型 显示类型:
  • 轮播 - 所有幻灯片都显示在一个连续不断且可横向滚动的内容带中。
  • 幻灯片 - 一次显示一张幻灯片。
自动播放
仅当类型设为幻灯片时才适用。

选中此复选框可使系统自动跳至轮播式图库中的下一张图片(无需用户进行互动)。若想实现自动播放,轮播式图库中必须包含至少 3 张幻灯片。

延迟
仅当类型设为幻灯片并启用了自动播放设置时才适用。

跳至下一张幻灯片之前的时间间隔(以毫秒为单位)。默认的延迟是 5000 毫秒(5 秒)。

显示控件 选中此复选框可使系统显示向左箭头和向右箭头,以便用户在移动设备上浏览轮播式图库的内容。在桌面设备上,包含多项内容的轮播式图库会一直显示箭头。
循环播放
仅当类型设为幻灯片时才适用。

选中此复选框可使系统自动从第一张幻灯片跳至下一张幻灯片或从最后一张幻灯片跳至第一张幻灯片。轮播式图库将会循环播放其中的所有幻灯片。若想实现循环播放,轮播式图库中必须包含至少 3 张幻灯片。

事件和操作

amp-carousel 组件发送的事件

您可以根据以下 amp-carousel 组件事件触发其他操作:

事件 说明
幻灯片变化 当所显示的幻灯片发生变化时发送。

要在事件对话框中选择上述某个事件,请将 amp-carousel 组件设为目标

amp-carousel 组件执行的操作

以下 amp-carousel 组件操作可由其他事件触发:

操作 配置选项
转到幻灯片
  • 索引 - 要转到的幻灯片,0 表示第一张幻灯片。

事件对话框中选择上述某个操作时,请将 amp-carousel 组件设为接收方

了解如何配置事件

预览

此组件在 Google Web Designer 界面内无法预览。要查看该组件的实际运作情况,请点击右上角的预览 按钮,在您的首选浏览器中预览您的文档

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
Google 应用
主菜单
2656753169754442280
true
搜索支持中心
true
true
true
true
true
5050422
false
false