Google AMP amp-carousel

Last Updated : 16 Oct, 2020

The amp-carousel component is used to make an image/content carousel in AMP HTML along the horizontal axis. A carousel is a slideshow of images through a series of images.

Required Scripts: Importing the amp-carousel component in the header.

HTML

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

Attributes:

type: It specifies the type of carousel. By default, type is set as carousel (all slides scroll horizontally, slides could have different CSS here). It could also be set as slide (single slide shown at a time).
control: It displays the left and right arrows for user navigation.
autoplay: When we use this attribute, it moves the carousel on its own.
loop: Using loop attribute a loop is made i.e. there is right control in the last slide and left control in the first.
delay: Duration of display of next slide by default it is set as 5000ms and delay cannot be less than 1000ms.
slide: It is used to specify which slide should go first.

Example 1: Using type=”slides” to display a list of images as slides.

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>amp-carousel</title> 
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
      
    <!-- Import the carousel component in the header. -->
    <script async custom-element="amp-carousel"
        src= 
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js"> 
    </script> 
  
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-carousel/index.html"> 
  
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
  
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
</head> 
  
<body> 
    <amp-carousel width="400" height="300" 
            layout="responsive" type="slides"> 
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
  
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
  
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
    </amp-carousel> 
</body> 
  
</html>

Output:

Example 2: Using autoplay attribute with a delay of 3000ms.

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>amp-carousel</title> 
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
      
    <!-- Import the carousel component  
        in the header. -->
    <script async custom-element="amp-carousel"
        src= 
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js"> 
    </script> 
  
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-carousel/index.html"> 
      
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
  
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
  
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
</head> 
  
<body> 
    <amp-carousel width="400" height="300"
            layout="responsive" type="slides"
            autoplay delay="3000"> 
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
  
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
  
        <amp-img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png"
            width="400" height="300"
            layout="responsive"> 
        </amp-img> 
    </amp-carousel> 
</body> 
  
</html>