“轮播式图库”组件

AMPHTML 广告、视频广告和图片广告均不支持此组件。

借助“轮播式图库”组件，您可以创建支持通过滑动方式展示多张图片的轮播式图库。通过修改该组件的属性，您可以打造各种 3D 体验和轮播类型。您还可以在动态广告中使用轮播式图库。

选择适当的图库

Google Web Designer 有 4 种不同的图库组件：

• 360° 图库会显示对象不同角度的图片，使您能够前后滑动来旋转对象。360° 图库无法显示组或导航元素。
• 手滑式图库具有简单的平面外观，可让您纵向或横向滑动图片或组。
• 轮播式图库与手滑式图库类似，但轮播式图库会用 3D 外观显示相邻图片，就好像使用旋转显示器显示它们一样。
• 过渡效果图库可在您从一张图片切换到下一张图片的过程中提供一系列动画效果。

如需在项目中使用轮播式图库，请执行以下操作：

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

2. 将轮播式图库 组件拖到场景中。

3. 在属性面板的轮播式图库属性部分，为该组件命名。

4. 添加一系列图片或组。使用组可以显示非图片元素，或在单个帧中显示多个元素。

   • 如需向图库中添加图片，请使用下列方法之一：
     • 在属性面板的“轮播式图库”属性部分，点击图片字段中的选择图库图片 按钮。点击选择图片按钮以浏览图片文件，或者直接将文件拖到对话框中。
     • 在“属性”面板的“轮播式图库”属性部分中，在图片字段中添加图片网址（以英文逗号分隔）。
   • 要向图库中添加组，请执行以下操作：
     • 在属性面板的“轮播式图库”属性部分，向组字段中添加一系列组名称（以英文逗号分隔）。

5. （可选）调整该组件的其他属性（如下所述）。

要重排或移除图库中的图片，请执行以下操作：

1. 在属性面板的“轮播式图库”属性部分，点击选择图库图片 按钮。
2. 如需重排某张图片的位置，请将其拖到新位置；如需从图库中移除某张图片，请将鼠标悬停在该图片上，然后点击删除 按钮。
3. 点击确定。

属性

属性	说明
名称	设置轮播式图库的名称。
图片	可让您选择要在图库中使用的图片。可以绑定到动态数据。
组	要在图库中使用的组列表（以英文逗号分隔）。可以绑定到动态数据。
过渡时间	切换图片时的过渡时长（以毫秒为单位）。
开始帧	您要在开始时显示的图片的编号。
自动播放	如果选中该属性，系统会自动轮换播放图库中的图片。
包括导航	如果选中该属性，则会加入用于浏览图库的导航图标。
使用缩略图	如果在选中该属性的同时亦选中“包括导航”，系统便会显示用于导航的缩略图（而不是图标）。
突出显示颜色	设置导航图片的突出显示颜色。
缩放方式	确定各种尺寸的图片在尺寸固定的帧中如何显示： 将图片调整为合适尺寸 - 视需要按比例调整图片大小以适应帧尺寸，而不剪裁图片。如果图片和帧的宽高比不同，则会添加内边距。 剪裁图片以覆盖整个可用空间 - 调整图片大小以填满整个帧。如果帧和图片的宽高比不同，则会视需要剪裁图片。 无 - 在帧的中央位置以原始尺寸显示图片。如果图片比帧小，则会将多余区域填充为透明。如果图片比帧大，则会剪裁图片。 拉伸图片以覆盖整个可用空间 - 视需要调整图片大小并进行拉伸，以在不剪裁图片的情况下适应相应帧的尺寸。

高级属性

如需显示高级属性，请在组件属性窗格中点击高级属性旁边的展开图标 ：

帧宽度	图库中的图片帧的宽度（以像素为单位）。
帧高度	图库中的图片帧的高度（以像素为单位）。
邻域旋转	应用到邻域帧的旋转次数。
邻域分隔	帧与帧之间的间隔长度。
邻域垂直偏移	邻域帧在显示时的高度。
邻域范围	邻域图片的相对范围。
退出网址	一系列网址（以英文逗号分隔），与图库中的各个帧相对应。可以绑定到动态数据。
显示反射 (WebKit)	如果选中该属性，系统会显示图片的映像。仅 WebKit 浏览器支持此反射。
退出帧时暂停播放媒体	如果选中该属性，只要当前帧出现变化，系统就会暂停正在该帧中播放的音频或视频（以避免在后台播放不必要的内容）。
进入帧时继续播放媒体	如果选中该属性，则会在进入下一帧后开始播放其中所有已暂停的音频或视频。

事件和操作

“轮播式图库”组件发送的事件

您可以根据以下轮播式图库组件事件触发其他操作：

事件	说明
首次互动	用户首次与图库互动时发送。
已观看所有帧	图库的所有帧至少都已展示过一次时发送。
已加载图片	图库的所有帧均已加载时发送。
自动播放已结束	当自动播放因任何原因结束时发送。
已显示帧	每个新帧显示完毕时发送。
帧被激活	帧开始出现变化时发送。
已自动播放帧	当帧启动自动播放时发送。
点按帧	用户点击帧时发送。
左端	图库在用户滑动后达到最左端时发送。
右端	图库在用户滑动后达到最右端时发送。
跟踪开始	当鼠标拖动/触摸拖动操作开始时发送。
跟踪	组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据
跟踪结束	当鼠标拖动/触摸拖动操作结束时发送。

如需在事件对话框中选择上述某个事件，请将“轮播式图库”组件设为目标。

“轮播式图库”组件执行的操作

以下轮播式图库组件操作可由其他事件触发：

操作	配置选项
转至帧	索引 动画 -“none”或“slide”
前进	动画 -“none”或“slide”
后退	动画 -“none”或“slide”
旋转一次	旋转时间 - 以毫秒为单位的时间 方向 -“forwards”或“backwards”
停止旋转	无

在事件对话框中选择上述某个操作时，请将“轮播式图库”组件设为接收方。

了解如何配置事件。

预览

在场景中，轮播式图库仅会显示开始帧，以便您大致了解该组件的呈现效果。如需查看该组件实际的完整呈现效果，请点击右上角的预览按钮，在首选浏览器中预览文档。