Google AMP amp-carousel

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-carousel" src=
</script>

chevron_right


Attributes:



  1. 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).
  2. control: It displays the left and right arrows for user navigation.
  3. autoplay: When we use this attribute, it moves the carousel on its own.
  4. loop: Using loop attribute a loop is made i.e. there is right control in the last slide and left control in the first.
  5. delay: Duration of display of next slide by default it is set as 5000ms and delay cannot be less than 1000ms.
  6. 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>amp-carousel</title>
    <script async src=
    </script>
      
    <!-- Import the carousel component in the header. -->
    <script async custom-element="amp-carousel"
        src=
    </script>
  
    <link rel="canonical" href=
  
    <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=
            width="400" height="300"
            layout="responsive">
        </amp-img>
  
        <amp-img src=
            width="400" height="300"
            layout="responsive">
        </amp-img>
  
        <amp-img src=
            width="400" height="300"
            layout="responsive">
        </amp-img>
    </amp-carousel>
</body>
  
</html>

chevron_right


Output:

 

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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>amp-carousel</title>
    <script async src=
    </script>
      
    <!-- Import the carousel component 
        in the header. -->
    <script async custom-element="amp-carousel"
        src=
    </script>
  
    <link rel="canonical" href=
      
    <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=
            width="400" height="300"
            layout="responsive">
        </amp-img>
  
        <amp-img src=
            width="400" height="300"
            layout="responsive">
        </amp-img>
  
        <amp-img src=
            width="400" height="300"
            layout="responsive">
        </amp-img>
    </amp-carousel>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.