This component is not supported for AMPHTML ads, video ads, or image ads.
The Carousel Gallery component creates a swipeable carousel-style gallery for multiple images. Modify the component properties to create a variety of 3D experiences and carousel types. You can also use a Carousel Gallery in a dynamic ad.
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 Carousel Gallery in your project:
-
Open the Components panel, then the Galleries folder.
-
Drag the Carousel Gallery component to the stage.
-
In the Carousel Gallery properties section of the Properties panel, name the component.
-
Add either a set of images or a set of groups. Use groups to display elements other than images, or to display multiple elements in a single frame.
- 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.
- To add images to the gallery, use either of the following methods:
-
Optionally, adjust additional component properties (described below).
To reorder or remove images in the gallery:
- In the Carousel 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 | Sets the Carousel Gallery name. |
Images | Lets you select the images for use in the Gallery. Can be bound to dynamic data. |
Groups | A comma-delimited list of groups to use in the gallery. Can be bound to dynamic data. |
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:
|
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. |
Exit URLs | A list of URLs, separated by commas, that corresponds to each frame in the gallery. Can be bound to dynamic data. |
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 and actions
Events sent by the Carousel Gallery componentYou can trigger other actions based on the following Carousel 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. |
Autoplay ended | Sent when autoplay has ended for any reason. |
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 activated for 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. |
Track start | Sent when the mouse or touch drag begins. |
Track | The component registers the X and Y location data associated with the mouse or touch drag. |
Track end | Sent when the mouse or touch drag ends. |
To select one of these events in the Event dialog, set the Carousel Gallery component as the target.
The following Carousel Gallery component actions can be triggered in response to other events:
Action | Configuration options |
---|---|
Go to frame |
|
Go forwards | Animate - "none" or "slide" |
Go backwards | Animate - "none" or "slide" |
Rotate once |
|
Stop rotation | none |
When you select one of these actions in the Event dialog, set the Carousel Gallery component as the receiver.
Learn how to configure events.
Preview
On the stage, the Carousel 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.