Slides don't reset when going to the next page

[danieldunderfelt]

I just cloned the repo, and I noticed that the currentSlide value does not reset when the page changes. This happens with just the test content included by default.

Reproduce:

1. Start dev mode
2. Open the slideshow
3. Press space (or right arrow) until page changes (see url)
4. The view is black because the currentSlide number is still where it was left from the previous page
5. Setting the currentSlide value to 0 makes it work on page-2

I'll try to come up with a solution myself, but this seems like a pretty major issue.

[IrvingArmenta]

Not sure if you're still interested in this, or if you already found the solution, but here it's my workaround for going to the next page and reset the slide number, I'm working on how going back:

in SlidePage.jsx there is a useEffect hook listening lilke this:

 useEffect(() => {
    router.push(
      `${router.pathname}`,
      `${router.pathname}?mode=${mode}#${currentSlide}`
    );
  }, [currentSlide, mode, router.pathname]);

This one is taking care of handling the slides, by making a mask of it, it should be set to "shallow" since it's just masking the URL:

 useEffect(() => {
    router.push(
      `${router.pathname}`,
      `${router.pathname}?mode=${mode}#${currentSlide}`,
      { shallow: true }
    );
  }, [currentSlide, mode, router.pathname]);

To reset the currentSlide state I just added another useEffect listening to route events:

 useEffect(() => {
    router.events.on("routeChangeComplete", () => {
      // resetting slides to 0
      setSlide(0);
    });
    router.events.on("routeChangeStart", () => {
      // going to next page
      console.log("going to next");
    });
  }, [router.events]);

routeChangeComplete will only trigger when you successfully loaded another "page" , in this case is /page-2; There is another function handling that router push:

  // Handle next page
    if (NEXT.indexOf(keyCode) !== -1 && currentSlide === slideCount) {
      if (router.query && router.pathname && next) {
        router.push(`${next}?mode=${mode}`);
      }
      return false;
    }

so, this should work as expected.

Hope it helps.