Google AMP amp-carousel

Опубликовано: 12 Апреля, 2022

Компонент amp-carousel используется для создания карусели изображений / контента в AMP HTML по горизонтальной оси. Карусель - это слайд-шоу изображений через серию изображений.

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>

Атрибуты:

  1. type: указывает тип карусели. По умолчанию тип установлен как карусель (все слайды прокручиваются по горизонтали, здесь слайды могут иметь другой CSS). Его также можно настроить как слайд (показывать по одному слайду за раз).
  2. control: отображает стрелки влево и вправо для навигации пользователя.
  3. autoplay: когда мы используем этот атрибут, он перемещает карусель самостоятельно.
  4. loop: Используя атрибут loop, создается цикл, т.е. на последнем слайде есть правый элемент управления, а в первом - левый.
  5. delay: Продолжительность отображения следующего слайда по умолчанию составляет 5000 мс, а задержка не может быть меньше 1000 мс.
  6. слайд: используется, чтобы указать, какой слайд должен идти первым.

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>

Выход:

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>

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ