Description | A generic carousel for displaying multiple similar pieces of content along a horizontal axis; meant to be highly flexible and performant. |
Availability | Stable |
Required Script | <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
Examples | everything.amp.html |
The following lists validation errors specific to the amp-carousel
tag
(see also amp-carousel
in the AMP validator specification:
Validation Error | Description |
---|---|
TAG_REQUIRED_BY_MISSING | Error thrown when required amp-carousel extension .js script tag is missing or incorrect. |
IMPLIED_LAYOUT_INVALID | Error thrown when implied layout is set to CONTAINER ; this layout type isn't supported. |
SPECIFIED_LAYOUT_INVALID | Error thrown when specified layout is set to CONTAINER ; this layout type isn't supported. |
Layout not supported for: responsive |
Error thrown when layout set to RESPONSIVE and the type attribute is set to (or defaults to) carousel . |
Each of the amp-carousel
component’s immediate children is considered an item in the carousel. Each of these nodes may also have arbitrary HTML children.
The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backwards a single item.
The carousel advances between items if the user swipes, uses arrow keys, clicks an optional navigation arrow.
<amp-carousel width=300 height=400>
<amp-img src="my-img1.png" width=300 height=400></amp-img>
<amp-img src="my-img2.png" width=300 height=400></amp-img>
<amp-img src="my-img3.png" width=300 height=400></amp-img>
</amp-carousel>
Note, that while the example shows a carousel of images amp-carousel
support arbitrary children.
controls
If present, displays left and right arrows for the user to use in navigation on mobile. Visibility of arrows can also be controlled via styling, and a media query can be used to only display arrows at certain screen widths. On desktop, arrows will always be displayed unless only a single child is present.
type
carousel
(default) - All slides are shown and are scrollable horizontally. Be aware thattype=carousel
does not currently supportlayout=responsive
.slides
- Shows a single slide at a time.
loop (type=slides only)
If present, the user may advance past the first item or the final item.
autoplay (type=slides only)
If present, advances the slide to the next slide without user interaction.
By default it will advance a slide in 5000 millisecond intervals (5 seconds)
and can be overridden by the delay
attribute.
If autoplay
is present it will also attach the loop
attribute to
amp-carousel
if loop
is not already present.
delay (type=slides only)
By default a slide will advance in 5000 millisecond intervals (5 seconds)
when autoplay
is specified and will use the value of the delay
attribute if present (minimum of 1000 ms, an error will be thrown if its any lower).
The value of delay
must be numeric representation in milliseconds, ex. delay=5000
.
-
You may use the
amp-carousel
element selector to style it freely. -
.amp-carousel-button
by default uses an inlined svg as the background-image of the buttons. You may override this with your own svg or image like so:default
.amp-carousel-button-prev {
left: 16px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}
override
.amp-carousel-button-prev {
left: 5%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}
- By default the visual state of an
amp-carousel
button when it is disabled is that it is hidden. You may override this visual state of anamp-carousel
button in the disabled state by:
.amp-carousel-button.amp-disabled {
/* make sure we make it visible */
visibility: visible;
/* choose our own background styling, red'ish */
background-color: rgba(255, 0, 0, .5);
}