Add carousel on AMP web page

You can use the below code to add carousels on AMP powered web page.

<!-- Add below script and style within head tag -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style>.container {width: 640px;height: 480px;margin: 100px auto;}</style>

<!-- Add below HTML markup within body tag -->
<div class="container">
    <amp-carousel layout="fixed-height" height="168" type="carousel" >
        <amp-img src="https://placeimg.com/640/480/any" width="300" height="168"></amp-img>
        <amp-img src="https://placeimg.com/640/480/nature" width="300" height="168"></amp-img>
        <amp-img src="https://placeimg.com/640/480/tech" width="300" height="168"></amp-img>
        <amp-img src="https://placeimg.com/640/480/nature" width="300" height="168"></amp-img>
        <amp-img src="https://placeimg.com/640/480/tech" width="300" height="168"></amp-img>
        <amp-img src="https://placeimg.com/640/480/any" width="300" height="168"></amp-img>
    </amp-carousel>
</div>

In AMP if you want to add a carousel, you can use <amp-carousel> HTML tag and inside this pass carousel elements like <amp-img>, <amp-ad> and <amp-fit-text>. In the code snippet, we have created a carousel which contains images only. We are adding images to carousel using <amp-img> tag of AMP.

The output from the above code snippets will be:

Using different AMP components

The code snippet that we are using shows only images inside the carousel created using AMP. But you can use mixed components of AMP in the AMP carousel.

If you want to create an AMP carousel that used image, AMP ad component, and highlighted article quote component then that code sample that we can use to create that is as below.

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="https://placeimg.com/640/480/tech" width="300" height="240"></amp-img>

    <amp-ad width="300" height="240"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>Loading ad component</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Your quote text can be included here
    </amp-fit-text>
</amp-carousel>

Was this helpful?