Google AMP 放大器轮播

amp-carousel 组件用于在AMP HTML中沿水平轴制作图像/内容轮播。轮播是通过一系列图像的图像幻灯片。

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

属性：

1. type：指定轮播的类型。默认情况下，类型设置为轮播（所有幻灯片水平滚动，此处幻灯片可以有不同的 CSS）。它也可以设置为幻灯片（一次显示一张幻灯片）。
2. 控件：显示用户导航的左右箭头。
3. autoplay：当我们使用这个属性时，它会自行移动轮播。
4. 循环：使用循环属性进行循环，即在最后一张幻灯片中有右控制，在第一张幻灯片中有左控制。
5. delay：下一张幻灯片的显示时长，默认设置为 5000ms，delay 不能小于 1000ms。
6. slide：用于指定应该先走哪张幻灯片。

示例 1：使用 type=”slides” 将图像列表显示为幻灯片。

HTML

  

    
    amp-carousel
    
    
      
    
    
    
  
    
  
    
  
    
        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
            }
        
    

  

    
        
        
  
        
        
  
        
        
    

  

输出：

示例 2：使用延迟为 3000 毫秒的自动播放属性。

HTML

  

    
    amp-carousel
    
    
      
    
    
    
  
    
      
    
  
    
        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
            }
        
    

  

    
        
        
  
        
        
  
        
        
    

  

输出：