examples/carousel-v1.amp.html - main - githubmirror/amphtml

examples/carousel-v1.amp.html
134 строки3 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AMP #0</title>
    <link rel="canonical" href="amps.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    <style amp-boilerplate>
      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;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <button on="tap:autoplay-carousel.goToSlide(index=0)">
      go to first slide on autoplay carousel
    </button>
    <button on="tap:reg-carousel.goToSlide(index=0)">
      go to first slide on regular carousel</button
    ><br />
    <amp-carousel
      id="autoplay-carousel"
      width="400"
      height="225"
      type="slides"
      autoplay
    >
      <amp-img
        src="https://picsum.photos/1600/900?image=113"
        width="400"
        height="225"
      ></amp-img>
      <amp-img
        src="https://picsum.photos/1600/900?image=110"
        width="400"
        height="225"
        alt="a beautiful cat"
      ></amp-img>
      <amp-img
        src="https://picsum.photos/1600/900?image=112"
        width="400"
        height="225"
      ></amp-img>
    </amp-carousel>

    <amp-carousel
      id="reg-carousel"
      width="400"
      height="225"
      type="slides"
      controls
      loop
    >
      <amp-img
        src="https://picsum.photos/1600/900?image=113"
        width="400"
        height="225"
      ></amp-img>
      <amp-img
        src="https://picsum.photos/1600/900?image=110"
        width="400"
        height="225"
        alt="a beautiful cat"
      ></amp-img>
      <amp-img
        src="https://picsum.photos/1600/900?image=112"
        width="400"
        height="225"
      ></amp-img>
    </amp-carousel>
  </body>
</html>