How to go to an AMP page in AMP history

Question

Hi, everybody I have a page index.html The source code, I took from here

I have one file story.html - AMP-story that contains 6 AMP-pages

How can I specify the path to the AMP-page in the AMP-history

I read this docs

I tried /stories/knife1/story.html/#page-1

and /stories/knife1/story/#page-1

and /stories/knife1/story.html/page-1

But it doesn't work

The first AMP-page always opens and playback continues

In my index.html, I have this code

<div class="entry-point-container">
                <div class="circular-entry-point">
                  <div class="entry-points">
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-31-08.jpg" style="border-color:#FF6F32">
                      <span class="entry-point-card-title">Q&A with ZOE Newman</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-29.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">24 Hours in New York City</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-31.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">The Next King of the Sea</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-40-09.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview1.png" style="border-color:#FF6F32">
                        <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview2.png" style="border-color:#EF7E31">
                        <span class="entry-point-card-title">The Next King of the Sea</span>
                      </div>
                  </div>
                </div>
              </div>

{ "behavior": { "autoplay": false, "pageScroll": false }, "controls": [{ "name": "close", "position": "start" }] }

And I use this JS code. Maybe this is the case?

const player = document.body.querySelector("amp-story-player");
const lightboxEl = document.querySelector(".lightbox");

if (player.isReady) {
  initializeCarousel();
} else {
  player.addEventListener("ready", () => {
    initializeCarousel();
  });
}

function initializeCarousel() {
  const stories = player.getStories();

  const thumbnails = document.querySelectorAll(
    ".entry-point-card-container img"
  );
  console.log(thumbnails);

  thumbnails.forEach((img, idx) => {
    img.addEventListener("click", () => {
      player.show(stories[idx].href);
      player.play();
      lightboxEl.classList.toggle("show");
    });
  });
}

player.addEventListener("amp-story-player-close", () => {
  player.pause();
  lightboxEl.classList.toggle("show");
});

Answer 1

player.show() takes as the second parameter the pageId, so you can call player.show("/stories/knife1/story.html", "page-1") and it should show the page with the ID page-1. Outside of the player, stories support the URL hashParam #page=page-1 that also loads that page.