Search
Clear search
Close search
Google apps
Main menu

The Carousel Gallery component

The Carousel Gallery component creates a swipeable carousel-like gallery for multiple images. The component properties can be modified to create a variety of 3D experiences and carousel types.

Choosing the right gallery

Google Web Designer has three different gallery components:

  • 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 Carousel Gallery in your project:

  1. Open the Components panel, then the Galleries folder.

  2. Drag the Carousel Gallery component to the stage.

  3. In the Carousel Gallery properties section of the Properties panel, name the component.

  4. Add either a set of images or a set of groups.

    • To add images to the gallery, use either of the following methods:
      • In the Carousel 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 Carousel Gallery properties section of the Properties panel, add URLs for your images in the Images field, separated by commas.
    • To add groups to the gallery:
      • In the Carousel Gallery properties section of the Properties panel, add a list of group names in the Groups field, separated by commas.
  5. Optionally, adjust additional component properties (described below).

To reorder or remove images in the gallery:

  1. In the Carousel Gallery properties section of the Properties panel, click the "Select Gallery images" button .
  2. Drag an image to its new position to reorder it, or hover over an image and click the delete icon  to remove the image from the gallery.
  3. Click OK.

Properties

Property Description
Name Sets the Carousel 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.
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 along 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 image 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 image 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 image to fill - Resizes and stretches image as necessary to match the dimensions of the frame without cropping.

Advanced properties

To show the advanced properties, click the expand icon  next to "Advanced properties" in the component properties pane.

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.
Neighbor rotation The amount of rotation applied to the neighboring frames.
Neighbor separation The amount of separation between the frames.
Neighbor vertical offset How high the neighboring frame appears.
Neighbor scale The comparative scale of the neighboring image.
Show reflection (WebKit) When checked, shows a reflection of the image. The reflection is only supported in WebKit browsers.
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).

Events

Events can be used to trigger other actions in your ad. The Carousel Gallery component sends the following 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.
Left end Sent when the gallery reaches its left end after swiping.
Right end Sent when the gallery reaches its right end after swiping.

Actions

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

Action Configuration options
Go to frame
  • Index
  • Animate - "none" or "slide"
Go forwards Animate - "none" or "slide"
Go backwards Animate - "none" or "slide"
Rotate once
  • Rotation time - time in milliseconds
  • Direction - "forwards" or "backwards"
Stop rotation none

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.

Was this article helpful?
How can we improve it?