The amp-carousel component

Note: This component can only be used in AMPHTML ads.

The amp-carousel component creates a carousel for displaying multiple images. You can customise the carousel's appearance and behaviour by modifying its properties.

*An example rendering of the amp-carousel component.*

To use the amp-carousel component in your project:

Open the Components panel, then the Galleries folder.
Drag the amp-carousel component to the stage.
In the Properties panel, find the amp-carousel properties section and enter a name for the component in the Name field.
In the Images field, add images to the gallery using one of the following methods:
- Click the Select Gallery images button. Click the Choose images button to browse for image files, or drag files directly to the dialogue box.
- Enter the URLs for your images, separated by commas.
Optionally, adjust other component properties (described below).

Code view

In Code view, the amp-carousel component lists any images from the Images property in a special Google Web Designer attribute, images, rather than including them as children. Otherwise, source code for the component should follow the official specification. (The published file will fully follow the specification.)

To reorder or remove images in the carousel:

In the amp-carousel properties section of the Properties panel, click the Select Gallery images button. A dialogue will open with a list of images in the carousel.
Drag an image to its new position to reorder it, or hover over an image and click the Delete image icon to remove the image from the carousel.
Click OK.

Properties

Change the appearance and behaviour of the amp-carousel component in the Properties panel.

Property	Description
Name	The amp-carousel name.
Images	URLs of the images to display in the carousel.
Type	The display type: carousel – All slides display in a continuous strip and are scrollable horizontally. slides – A single slide displays at a time.
Auto-play	Applies only when the type is set to slides. Tick this box to automatically advance to the next image in the carousel without user interaction. There must be at least three slides for auto-play to occur.
Delay	Applies only when the type is set to slides* and auto-play is enabled.* The time interval in milliseconds before advancing to the next slide. The default delay is 5,000 milliseconds (five seconds).
Show controls	Tick this box to display left and right arrows for the user to navigate carousel items on mobile devices. On desktop, arrows are always displayed for carousels with multiple items.
Loop	Applies only when the type is set to slides. Tick this box to allow advancing past the first slide or the final slide. The carousel will loop around to the other end. There must be at least three slides for looping to occur.

Events and actions

Events sent by the amp-carousel component

You can trigger other actions based on the following amp-carousel component events:

Event	Description
Slide change	Sent when the displayed slide changes.

To select one of these events in the Event dialogue, set the amp-carousel component as the target.

Actions performed by the amp-carousel component

The following amp-carousel component actions can be triggered in response to other events:

Action	Configuration options
Go to slide	Index – The slide to go to, with 0 indicating the first slide.

When you select one of these actions in the Event dialogue, set the amp-carousel component as the receiver.

Learn how to configure events.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper-right corner.

Was this helpful?

How can we improve it?