34 lines
946 B
HTML
34 lines
946 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Slideshow</title>
|
|
<style>
|
|
body { background: #111; color: #fff; text-align: center; }
|
|
img { max-width: 90vw; max-height: 90vh; margin-top: 2vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Slideshow</h1>
|
|
<img id="slide" src="{{ images[0] }}" />
|
|
<script>
|
|
const images = {{ images | tojson }};
|
|
const img = document.getElementById('slide');
|
|
let i = 0;
|
|
|
|
function show(n) { // update helper
|
|
i = (n + images.length) % images.length;
|
|
img.src = images[i];
|
|
}
|
|
|
|
// auto-advance every 3000 ms
|
|
setInterval(() => show(i + 1), 3000);
|
|
|
|
// keyboard control
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight') show(i + 1); // next
|
|
if (e.key === 'ArrowLeft') show(i - 1); // previous
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|