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

amp-carousel用于在 AMP HTML 页面中制作图像轮播。在 AMP HTML 中，还可以使用amp-lightbox-gallery向 amp-carousel 添加灯箱效果，因为 amp-carousel 仅包含图片。

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

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

例子：

HTML

  

    
    
  
    
  
    
    
      
    
    
  
    Google AMP amp-lightbox-gallery
  
    
    
    
  
    
        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
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
      
    
        :root {
            --color-primary: #005AF0;
            --color-text-light: #fff;
            --space-1: .5rem;
            --space-2: 1rem;
        }
    

  

    
        
        
          
        
        
          
        
        
    

  

输出：

代码输出

当我们在图像中单击时，会看到以下视图

当我们单击左上角的画廊选项时，会看到以下视图