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 customize the carousel's appearance and behavior by modifying its properties.

An example rendering of the amp-carousel component.

To use the amp-carousel component in your project:

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

2. Drag the amp-carousel  component to the stage.

3. In the Properties panel, find the amp-carousel properties section and enter a name for the component in the Name field.

4. 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 dialog box.
   • Enter the URLs for your images, separated by commas.

5. 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:

1. In the amp-carousel properties section of the Properties panel, click the Select Gallery images button. A dialog will open with a list of images in the carousel.
2. 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.
3. Click OK.

Properties

Change the appearance and behavior 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.
Autoplay	Applies only when the type is set to slides. Check this box to automatically advance to the next image in the carousel without user interaction. There must be at least three sildes for autoplay to occur.
Delay	Applies only when the type is set to slides and autoplay is enabled. The time interval in milliseconds before advancing to the next slide. The default delay is 5000 milliseconds (5 seconds).
Show controls	Check 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. Check 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 dialog, 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 dialog, 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.