#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • websites

amp-next-page

Introduction

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

Setup

Import the amp-next-page component.

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

Basic usage

This sample uses the amp-next-page component to load other sample pages. It defines a custom separator.

amp-next-page separator
<amp-next-page>
  <script type="application/json">
    [
      {
        "title": "amp-img",
        "image": "https://preview.amp.dev/static/samples/img/amp.jpg",
        "url": "https://preview.amp.dev/documentation/examples/components/amp-img/"
      },
      {
        "title": "amp-bind",
        "image": "https://preview.amp.dev/static/samples/img/amp.jpg",
        "url": "https://preview.amp.dev/documentation/examples/components/amp-bind/"
      },
      {
        "title": "amp-accordion",
        "image": "https://preview.amp.dev/static/samples/img/amp.jpg",
        "url": "https://preview.amp.dev/documentation/examples/components/amp-accordion/"
      },
      {
        "title": "amp-lightbox-gallery",
        "image": "https://preview.amp.dev/static/samples/img/amp.jpg",
        "url": "https://preview.amp.dev/documentation/examples/components/amp-lightbox-gallery/"
      },
      {
        "title": "amp-list",
        "image": "https://preview.amp.dev/static/samples/img/amp.jpg",
        "url": "https://preview.amp.dev/documentation/examples/components/amp-list/"
      }
    ]
  </script>
  <div class="amp-next-page-sample-separator"
    separator>
    amp-next-page separator
  </div>
</amp-next-page>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub