The 360° Gallery component

This component is not supported for AMPHTML ads, video ads, or image ads.

The 360° Gallery component lets you use a set of multiple images to show an object rotating. By default, the last image wraps to the first, which lets the user rotate the object seamlessly in either direction.

In the following example, 7 source images were used:

Choosing the right gallery

Google Web Designer has four different gallery components:

The 360° Gallery shows images of different sides of an object, letting you swipe back and forth to rotate the object. The 360° Gallery doesn't show groups or navigation elements.
The Swipeable Gallery has a simple, flat look, and lets you swipe through images or groups either vertically or horizontally.
The Carousel Gallery is similar to the Swipeable Gallery, but gives neighboring images a three-dimensional look, as if they were on a rotating display.
The Transition Gallery offers a range of animation effects while switching from one image to the next.

To use the 360° Gallery in your project:

Open the Components panel, then the Galleries folder.
Drag the 360° Gallery component to the stage.
In the 360° Gallery properties section of the Properties panel, name the component.
Add images to the gallery by one of the following methods:
- In the 360° Gallery properties section of the Properties panel, click the Select Gallery images button in the Images field. Click the Choose images button to browse for image files, or drag files directly to the dialog box.
- In the 360° Gallery properties section of the Properties panel, add URLs for your images in the Images field, separated by commas.
Optionally, adjust additional properties (described below).

To reorder or remove images in the gallery:

In the 360° Gallery properties section of the Properties panel, click the Select Gallery images button.
Drag an image to its new position to reorder it, or hover over an image and click the Delete button to remove the image from the gallery.
Click OK.

Properties

Property	Description
Name	The name of the component.
Images	URLs of the images to display in the gallery, comma-separated. Can be bound to dynamic data.
Autoplay	When checked, the gallery automatically displays each of its images in turn.
Wrap	When checked, the gallery wraps around from either end (the first image and the last image).

Events and actions

Events sent by the 360° Gallery component

You can trigger other actions based on the following 360° Gallery component events:

Event	Description
First interaction	Sent when the user first interacts with the gallery.
All frames viewed	Sent when every frame of the gallery has been shown at least once.
Images loaded	Sent when all the frames of the gallery have been loaded.
Frame shown	Sent when each new frame is completely shown.
Frame activated	Sent when a frame change is started.
Frame tap	Sent when the frame is clicked.

To select one of these events in the Event dialog, set the 360° Gallery component as the target.

Actions performed by the 360° Gallery component

The following 360° Gallery component actions can be triggered in response to other events:

Action	Configuration options
Go to frame	Frame number Animate - "none" or "slide" Rotation direction - "forwards" or "backwards"
Rotate once	Rotation time - time in milliseconds Rotation direction - "forwards" or "backwards"
Go forwards	none
Go backwards	none

When you select one of these actions in the Event dialog, set the 360° Gallery component as the receiver.

Learn how to configure events.

Preview

On the stage, the 360° Gallery displays just the start frame to give you an idea of how the component will appear. To see the fully rendered component in action, preview the document in your preferred browser by clicking the Preview button in the upper right corner.

Was this helpful?

How can we improve it?