Html Amp转盘停止自动播放功能非常随机-AMPTML广告_Html_Css_Amp Html

Html Amp转盘停止自动播放功能非常随机-AMPTML广告

html css amp-html

Html Amp转盘停止自动播放功能非常随机-AMPTML广告,html,css,amp-html,Html,Css,Amp Html,Amp carousel的自动播放似乎是随机工作的，其功能在很大程度上依赖于页面上的其他元素自动播放有时只会播放一个循环，但如果在代码中添加一个简单的空行，则会随机播放。我猜缓存清除了，旋转木马又无限期地自动播放了另一种情况是，如果转盘上有其他同级，则自动播放停止工作下面是一个带有两个amp转盘元件的示例。顶部的一个可以工作，但只要在放大器转盘的父级之间添加间距，它就会停止自动播放第二个，根本不起作用，如果你注释掉上面的兄弟姐妹，自动播放就起作用了 <!doctype html&g

Amp carousel的自动播放似乎是随机工作的，其功能在很大程度上依赖于页面上的其他元素

自动播放有时只会播放一个循环，但如果在代码中添加一个简单的空行，则会随机播放。我猜缓存清除了，旋转木马又无限期地自动播放了

另一种情况是，如果转盘上有其他同级，则自动播放停止工作

下面是一个带有两个amp转盘元件的示例。顶部的一个可以工作，但只要在放大器转盘的父级之间添加间距，它就会停止自动播放

第二个，根本不起作用，如果你注释掉上面的兄弟姐妹，自动播放就起作用了

<!doctype html>
<html ⚡4ads>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700">  
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp4ads-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>

        * {
          /* box-sizing: border-box; */
          border: 1px solid red;
        }

         body {
          font-family: 'Montserrat', sans-serif;
        }

        .banner {
          height: 600px;
          width: 100%;
          position: relative;
          text-align: center;
          color: #fff;
          overflow: hidden;
        }

        .banner::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.87) 98%);
         z-index: 1;
       }

        .bannner__img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .banner__container {
          position: relative;
          z-index: 3;
          display: flex;
          flex-direction: column;

        }

        .banner__features {
         padding:0;
         margin-bottom: auto;
         /* margin-top: 13rem; */
        }

        .banner__heading {
        }

        .banner__subheading {

        }

        .text-slider {
          width: 100%;
          border: 1px solid red;
        }

        .cover img {
          object-fit: cover;
        }
       .slider-container {
         position: relative;
       }

       a.cta {
         position: absolute;
         font-size: 12px;
         font-weight: 300;
         letter-spacing: 3px;
         bottom: 1rem;
         left: 50%;
         transform: translateX(-50%);
         border: 1px solid #fff;
         background: #EC2623;
         padding: 1.25rem 1.25rem;
         text-transform: uppercase;
         text-decoration: none;
         color: white;
         z-index: 2;
         display: inline-block;
       }
       .amp-carousel-slide {
        opacity: 0;
      }
      .amp-carousel-slide[aria-hidden=false] {
        transition: opacity 1s;
        opacity: 1;
      }

      .amp-carousel-button {
        visibility: collapse;
        /* display: none; */
      } 
      </style>
  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</head>

<body>
<!-- <div style="height:20rem;"></div>  -->

<amp-carousel class="text-slider" height="50" layout="fixed-height" type="slides" autoplay delay="300">
        <p class="banner__features-title">Slide 1</p>
        <p class="banner__features-title">Slide 2</p>
        <p class="banner__features-title">Slide 3</p>
        <p class="banner__features-title">Slide 4</p>
  </amp-carousel>

<div class="banner">
  <amp-carousel class="text-slider" height="50" layout="fixed-height" type="slides" autoplay delay="300">
        <p class="banner__features-title">Slide 1</p>
        <p class="banner__features-title">Slide 2</p>
        <p class="banner__features-title">Slide 3</p>
        <p class="banner__features-title">Slide 4</p>
    </amp-carousel>
  <amp-img class="cover banner__img" layout="fill" src="http://lorempixel.com/1000/1000"></amp-img>
  <div class="banner__container">


   <h1 class="banner__heading">Heading ipsum lorem lorem</h1>
    <h3 class="banner__subheading">Subheading lorem</h3>

    <div class="banner__features">
      <amp-carousel class="text-slider" height="50" layout="fixed-height" type="slides" autoplay delay="300">
        <p class="banner__features-title">Slide 1</p>
        <p class="banner__features-title">Slide 2</p>
        <p class="banner__features-title">Slide 3</p>
        <p class="banner__features-title">Slide 4</p>
    </amp-carousel>
    </div>
  </div>
  <a href="#" class="cta">Get in Touch</a>
</div>

 </body>
</html>


正文{可见性：隐藏}
* {
/*框大小：边框框*/
边框：1px纯红；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
}
.横幅{
高度：600px；
宽度：100%；
位置：相对位置；
文本对齐：居中；
颜色：#fff；
溢出：隐藏；
}
.banner：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图像：线性梯度（-180度，rgba（0,0,0,0.00）0%，rgba（0,0,0,0.87）98%）；
z指数：1；
}
班纳先生{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.banner___容器{
位置：相对位置；
z指数：3；
显示器：flex；
弯曲方向：立柱；
}
.banner___特征{
填充：0；
页边距底部：自动；
/*边缘顶部：13雷姆*/
}
.横幅标题{
}
.横幅副标题{
}
.文本滑块{
宽度：100%；
边框：1px纯红；
}
.掩护img{
对象匹配：覆盖；
}
.滑块容器{
位置：相对位置；
}
a、 cta{
位置：绝对位置；
字体大小：12px；
字体大小：300；
字母间距：3px；
底部：1rem；
左：50%；
转化：translateX（-50%）；
边框：1px实心#fff；
背景：#EC2623；
填充：1.25雷姆1.25雷姆；
文本转换：大写；
文字装饰：无；
颜色：白色；
z指数：2；
显示：内联块；
}
.安培转盘滑轨{
不透明度：0；
}
.amp旋转木马幻灯片[aria hidden=false]{
过渡：不透明度1s；
不透明度：1；
}
.amp旋转木马按钮{
能见度：塌陷；
/*显示：无*/
}