The Swipeable Gallery component

The Swipeable Gallery component lets you create a simple gallery that users can swipe forward and backwards to show either a set of different images of a set of different groups.

Choosing the right Gallery

Google Web Designer has three gallery components which are for three different types of uses:

360° Gallery - The 360° gallery is optimized to show an object on all sides, swiping back and forth to turn the object around. The 360° gallery has limited options, and cannot show groups or navigation elements.
Swipeable Gallery - The Swipeable gallery gives you a simple, flat look and lets you move through images or groups either vertically or horizontally.
Carousel Gallery - 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.

To use the Swipeable Gallery:

Open the components pane.
Drag the Swipeable Gallery component to the stage.
In the component properties section of the Properties pane, name the component.
Add either a set of images or a set of groups
Add images to the gallery:
- In the component properties section of the Properties pane, add URLs for your images in the Images field, separated by commas.
- In the component properties section of the Properties pane, click the add images button. Click the Select files from your computer button to browse for image files, or drag files directly to the dialog box.
Add groups to the gallery:
- In the component properties section of the Properties pane, add a list of group names in the Groups field, separated by commas.
Optionally adjust the component properties

Using Groups in the Swipeable gallery

The Swipeable gallery can hold either a set of images or a set of groups. Using groups lets you use assets that aren't images (such as a set of videos) or a collection of several assets in each frame of the gallery (such as images with captions).

When you're using videos (or other interactive types of assets), you need to select "Disable swipe" in the Advanced properties dialog. This will let the user interact with video controls. Then use the Gallery Navigation component to let the user move between gallery frames.

You cannot have both images and groups in the Swipeable gallery properties. To create a gallery that shows a mix of images and groups, convert the images you want to use into groups first.

Swipeable Gallery properties

Property	Description
Name	Sets the Swipeable Gallery name.
Images	Lets you select the images for use in the gallery
Groups	A comma-delimited list of groups to use in the gallery
Transition	The time (in milliseconds) for the transition between images.
Start frame	The number of the image you want to display initially.
Show frames	The number of frames that are shown in the gallery at one time.
Swipe frames	The number of frames that advance on each swipe.
Autoplay	When checked, automatically plays through the images in the gallery.
Include navigation	When checked, includes navigation icons for moving through the gallery.
Use thumbnails	When checked with "Include navigation", shows thumbnail images for navigation rather than icons.
Highlight color	Sets the highlight color for the navigation image.
Scaling	Determines how various sized images are displayed within the fixed frame size: Resize images to fit - Proportionally resizes the image as necessary to fit the frame without cropping. Padding will be added if the aspect ratio of the image and the frame are different. Crop images to fill - Resizes the image to completely fill the frame, cropping the image if necessary when the aspect ratio of the frame and the image are different. None - The image is displayed at its original size, centered in the frame. If the image is smaller than the frame, the extra space will be padded with transparency. If it's larger, the image will be cropped. Stretch images to fill - Resizes and stretches image as necessary to match the dimensions of the frame without cropping.
Swipe direction	Determines whether the images move horizontally or vertically in the gallery

Advanced settings

To show the advanced settings, click "Show advanced settings" in the Component properties pane.

Advanced Property	Description
Frame offset	The distance between images.
Frame width	The width (in pixels) of the image frame within the gallery.
Frame height	The height (in pixels) of the image frame within the gallery.
Autoplay duration	The duration (in milliseconds) that the gallery plays, from first to last frame. This time is split evenly between each image, unless a separate Autoplay step interval is chosen
Autoplay step interval	The duration (in milliseconds) that each image is shown when Autoplay is enabled. Images are played with this duration until the total Autoplay duration is reached, cycling through the images multiple times if necessary.
Exit URLs	A list of URLs, separated by commas, that corresponds to each frame in the gallery.
Disable swipe	A checkbox that lets you disable the swipe navigation for the gallery. This lets the user interact with elements in the frame without their interaction changing the frame accidentally. When this is checked, you can use either the "Include navigation" property or the Gallery Navigation component for changing frames.
Pause media when leaving frame	When checked, pauses audio or video that's playing in the current frame whenever the frame is changed (to avoid having unwanted content playing in the background).
Resume media when entering frame	When checked, starts any paused audio or video in the upcoming frame whenever the frame is changed (to avoid having unwanted content playing in the background).

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Events

Events are how you connect a physical gesture from your user to an action in your ad. The Swipeable Gallery component sends the following events, which can be used to trigger other actions:

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 autoplayed	Sent when a frame is automatically shown during autoplay
Frame tap	Sent when the frame is clicked
Left end	Sent when the gallery reaches its left end after swiping
Right end	Sent when the gallery reaches its right end after swiping
Mouse over a frame	Sent when the mouse enters the frame
Mouse out of a frame	Sent when the mouse leaves the frame

Actions

The following Swipeable Gallery component actions can be triggered by other events:

Action	Confirguration options
Go to frame	Frame number Animate - "none" or "slide"
Rotate once	Rotation time - time in milliseconds Direction - "forwards" or "backwards"
Stop rotation	none
Go forwards	none
Go backwards	none