Same slide multiple times in the presentation sequence

Question

I'm trying to navigate to the same slide multiple times using impress.js.

Imagine the following slides:

<div id="impress">
    <div id="map" class="step" data-scale="70">
        <img src="img/foo.jpg" class="map" />
    </div>
    <div id="cityX" class="step" data-x="11000" data-y="12000">
        <img src="img/cityX.jpg" class="pic" />
    </div>
    <!-- XXXXXXX TODO show map again-->

    <div id="cityY" class="step" data-x="12000" data-y="12000">
        <img src="img/cityY.jpg" class="pic" />
    </div>

My goal is to navigate to map slide in the beginning as well as between slides cityX and cityY. (In fact the map is outline view of the presentation and I want to zoom in to particular city, zoom out to map and zoom in to another city afterwards.)

Any ideas?

Answer 1

According to the documentation, you can programmatically navigate to target slide in Javascript.

In this case, you listened event when the slide moved to next slide. If current slide is cityX, move back to slide map

However, to avoid moving slide between map and cityX eternity, you must define a queue of slide IDs that map will move to next

var api = impress();
api.init();

const rootElement = document.getElementById( "impress" );
const mapElement = document.getElementById( "map" );
const nextMapSlides = ["cityX", "cityY"];

rootElement.addEventListener( "impress:stepleave", function(event) {
  const currentStep = event.target;
  const nextStep = event.detail.next;

  if (currentStep.id === "cityX") {
    return api.goto(mapElement);
  }

  if (currentStep.id === "map" && nextMapSlides.length) {
    const nextEl = document.getElementById(nextMapSlides[0]);
    api.goto(nextEl);
    // remove from queue
    nextMapSlides.shift();
  }
});

Answer 2

OK, as an alternative to javascript based solution, following works for me as well:

<div id="impress">
    <div id="map1" class="step" data-scale="70" data-x="0" data-y="0">
        <img src="img/foo.jpg" class="map" />
    </div>
    <div id="cityX" class="step" data-x="11000" data-y="12000">
        <img src="img/cityX.jpg" class="pic" />
    </div>
    <div id="map2" class="step" data-scale="70" data-x="0" data-y="0">
        <img src="img/foo.jpg" class="map" />
    </div>

    <div id="cityY" class="step" data-x="12000" data-y="12000">
        <img src="img/cityY.jpg" class="pic" />
    </div>

just had to make sure to use data-x as well as data-y attributes and duplicate the slide multiple times (with different ids: map1 and map2).