Amp-карусель останавливает функцию автоматического воспроизведения очень случайно - AMPHTML Ads - PullRequest
Новая
       31

Amp-карусель останавливает функцию автоматического воспроизведения очень случайно - AMPHTML Ads

2 голосов
/ 01 апреля 2019

Автозапуск 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>

Codepen

...