Table of contents

Plug and play components

AMP provides a huge library of components that create common widgets and unique web elements. Such as an accordion that collapses and expands content sections or a UI control to collect and store a user’s cookie consent. For our first page, we’ll turn our single image into an image carousel using amp-base-carousel.

Import the script

Unlike amp-img, the amp-base-carousel component is an extended component. Extended component logic is not included in the base AMP JS provided by the boilerplate code discussed earlier. This helps keep AMP pages light and lean by explicitly only loading JavaScript for components a page uses.

To use the amp-base-carousel component, we must import its script tag. Copy the tag below and place it into the head of the document.

You can find the import script for each component at the top of its reference documentation.

<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

Next, include another <amp-img> element under the first one, then wrap both inside <amp-base-carousel> tags, like below:

<amp-base-carousel width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

Component attributes

You may notice we have familiar attributes, width, height, and layout defined. Like HTML, attributes are used everywhere in AMP. But, AMP uses additional attributes to customize components’ behavior. Some are common element attributes and others are special to certain components. Let's add the loop attribute and set it to true and include more images:

<amp-base-carousel loop="true"  width="600" height="400" layout="responsive">
  <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/QrgRXH81DXk/600x400" width="600" height="400" layout="responsive"></amp-img>
  <amp-img src="https://source.unsplash.com/8QJSi37vhms/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>

The loop attribute is specific to amp-base-carousel and helps define its behavior. We can further customize our carousel with other attributes, such at auto-advance! You can view a list of attributes available to amp-base-carousel on its reference page. All components reference documents list available attributes and what behaviors they configure, see the AMP component library.

Previous chapter Next chapter

Written by @crystalonscript