The amp-carousel component creates a carousel for displaying multiple images. You can customize the carousel's appearance and behavior by modifying its properties.
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 dialog box.
- Enter the URLs for your images, separated by commas.
-
Optionally, adjust other component properties (described below).
Code view
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 dialog 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 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:
|
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 componentYou 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.
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.