<h1>Official school photos</h1>
<p class="instructions">Just move your mouse over the photo to pan left and right</p>
<p class="instructions2">Swipe left to move picture on touch devices</p>
<h2>1930</h2>
<div id="photo"></div>

body {
  background-color: #f9f9f9;
  font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
}

h1 {
  font-size: 1.33em;
  color: #444;
  text-align: center;
  text-transform: capitalize;
}
h2 {
  font-size: 1.12em;
  color: #444;
  text-align: center;
}
p {
  text-align: center;
}

#photo {
  background-image: url(https://picsum.photos/5000/560);
  background-position: 50% 0;
  height: 560px;
  max-width: 800px;
  margin: 1em auto;
  border: 1px solid #999;
  box-sizing: border-box;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  transition: background-position 0.3s ease;
  cursor: move;
}
p.instructions2 {
  display: none;
}

@media (any-hover: none) {
  p.instructions {
    display: none;
  }
  p.instructions2 {
    display: block;
  }
  #photo {
    background: none;
    width:800px;
    max-width:calc(100% - 20px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #photo:before {
    content: url(https://picsum.photos/5000/560);
  }
}

(function () {
  /* detect touch
  if ("ontouchstart" in document.documentElement) {
    return;
  }
*/
  const f = document.getElementById("photo");
  f.addEventListener("mousemove", function (e) {
    let posX = ((e.clientX - f.offsetLeft) / f.offsetWidth) * 100;
    f.style.backgroundPosition = posX + "% 0";
  });

  let count = 50;
  window.addEventListener("keydown", function (e) {
    if (e.key === "ArrowLeft" && count > 1) count--;
    if (e.key === "ArrowRight" && count < 100) count++;
    f.style.backgroundPosition = count + "% 0";
  });
})();