如何在Google AMP的amp-carousel中添加灯箱效果？

本文概述

HTML代码示例
HTML代码示例
HTML代码示例

的轮播用于在AMP HTML页面中制作图像轮播。在AMP HTML中, 还可以添加一个灯箱效果到使用放大器的轮播amp-lightbox-gallery鉴于amp-carousel中仅包含图像。

所需脚本：将amp-carousel组件导入标头。

HTML代码示例

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

将amp-lightbox-gallery组件导入标头

HTML代码示例

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

例子：

HTML代码示例

<!doctype html>
<html ⚡>
  
<head>
     <meta charset = "utf-8">
     <link rel = "canonical" href =
"https://amp.dev/documentation/examples/components/amp-lightbox-gallery/index.html">
  
     <meta name = "viewport" content =
"width=device-width, minimum-scale=1, initial-scale=1">
  
     <script async src =
         "https://cdn.ampproject.org/v0.js">
     </script>
      
     <script async custom-element = "amp-carousel" 
src = "https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
     </script>
  
     <title>Google AMP amp-lightbox-gallery</title>
  
     <!-- Import the amp-lightbox-gallery 
         component in the header.  -->
     <script async custom-element = "amp-lightbox-gallery"
src = "https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js">
     </script>
  
     <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>
      
     <style amp-custom>
         :root {
             --color-primary: #005AF0;
             --color-text-light: #fff;
             --space-1: .5rem;
             --space-2: 1rem;
         }
     </style>
</head>
  
<body>
     <amp-carousel lightbox width = "1600" 
         height = "1300" layout = "responsive"
         type = "slides">
         <amp-img src =
"https://media.srcmini.org/wp-content/uploads/20201027070147/gg.jpg"
             width = "200"
             height = "100">
         </amp-img>
          
         <amp-img src =
"https://media.srcmini.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"
             width = "200" height = "100">
         </amp-img>
          
         <amp-img src =
"https://media.srcmini.org/wp-content/uploads/20201027070147/gg.jpg"
             width = "200"
             height = "100">
         </amp-img>
     </amp-carousel>
</body>
  
</html>

输出如下：