A simple slideshow

This page is the first page of a slide show.

Click anywhere to go to the next slide

Selecting a slide

Each slide is a <div> element.

The current slide is selected using window.location.hash.

Showing only one slide

A style rule ensures that the current :target is the only thing that shows.

div:not(:target) { opacity: 0; position: absolute; top: 0; }

(We could use display: none, but we'll need this later.)

Setup

At load time, each <div> element needs to be numbered.

  let last = 0;
  addEventListener("load", _ => {
  document.querySelectorAll("div").forEach((e, i) => {
    e.id = `d${i}`;
    last = i;
  });
  window.location.href = "#d0";
});

Moving slides

Wire it up so that each click advances to the next element.

And left and right keys do something sensible too.

  let s = 0;
  const go = p => {
      s = Math.min(Math.max(0, p), last);
      window.location.hash = `#d${s}`;
  };
  window.addEventListener("click", _ => go(s + 1));
  window.addEventListener("keydown", e => {
    switch(e.keyCode) {
    case 37: /* left */ go(s - 1); break;
    case 32: case 39: /* right */ go(s + 1); break;
    }
  });

Transitions

Now setup a transition for the <div> to make the transitions trippy.

div { transition: opacity 0.4s ease-in; }

Color

Make sure to change the background color on each slide

mix-blend-mode: difference; color: #fff;

document.body.style.backgroundColor = `rgb(${random})`;