Question

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

自动播放有时只会播放一个循环，但是如果您在代码中添加一个简单的空行，则会随机放置。我想缓存会清除，轮播会再次无限期自动播放。

在另一种情况下，如果轮播中有其他兄弟姐妹，则自动播放会停止工作。

请参见下面的示例，其中包含两个amp-carousel元素。最上面的一个可以工作，但是一旦您在父级轮播中增加了父级轮播之间的间距，就会停止自动播放。

第二个根本不起作用，如果您注释掉其上方的兄弟姐妹，则自动播放会起作用。

<!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>

Codepen

amp-carousel停止自动播放功能非常随机-AMPHTML Ads

0 个答案: