amp-next-page

Edit on Github
Open in Playground View Demo

Experimental Mode

This example uses the following experimental feature: [amp-next-page]. Enable the experiment via the button below. Some components require the AMP Dev Channel to be enabled as well. Learn more here.

Enable Dev Channel

Introduction

amp-next-page allows you to add an infinite scroll style experience to your AMP pages.

Note: For performance reasons amp-next-page will currently load and display a maximum of three pages on screen at once, so cannot be used to provide a true infinite scroll.

Setup

Import the amp-next-page component.

<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-0.1.js"></script>

Basic usage

This sample uses the amp-next-page component to load other sample pages. It defines a custom separator and uses the hideSelectors feature to remove footer and sidebar. You can see the preview here.

<amp-next-page>
  <script type="application/json">
    {
      "pages": [{
          "title": "amp-img",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.com/components/amp-img/"
        },
        {
          "title": "amp-bind",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.com/components/amp-bind/"
        },
        {
          "title": "amp-accordion",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.com/components/amp-accordion/"
        },
        {
          "title": "amp-lightbox-gallery",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.com/components/amp-lightbox-gallery/"
        },
        {
          "title": "amp-list",
          "image": "https://ampbyexample.com/img/social.png",
          "ampUrl": "https://ampbyexample.com/components/amp-list/"
        }
      ],
      "hideSelectors": [
        "footer",
        "aside"
      ]
    }
  </script>
  <div class="amp-next-page-sample-separator"
    separator>
    amp-next-page separator
  </div>
</amp-next-page>