69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Slideshow</title>
|
|
<style>
|
|
body { background:#111; color:#fff; text-align:center; }
|
|
img { max-width:90vw; max-height:80vh; margin-top:2vh; }
|
|
#controls { margin-top:2vh; }
|
|
button { padding:.6rem 1.1rem; font-size:1rem; margin:.2rem;
|
|
border:0; border-radius:.4rem; cursor:pointer; }
|
|
#counter { margin-top: 1vh; font-size: 1.1rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Slideshow</h1>
|
|
|
|
<img id="slide" src="{{ images[0] }}"/>
|
|
|
|
<div id="controls">
|
|
<button id="prev">◀︎ Prev</button>
|
|
<button id="toggle">Pause</button>
|
|
<button id="next">Next ▶︎</button>
|
|
<button id="fullscreen">⛶ Fullscreen</button>
|
|
</div>
|
|
|
|
<div id="counter">1 / {{ images|length }}</div>
|
|
|
|
<script>
|
|
const images = {{ images|tojson }};
|
|
const img = document.getElementById('slide');
|
|
const btnT = document.getElementById('toggle');
|
|
const btnF = document.getElementById('fullscreen');
|
|
const counter = document.getElementById('counter');
|
|
let i = 0, playing = true, timer = setInterval(next, 15000);
|
|
|
|
function show(n) {
|
|
i = (n + images.length) % images.length;
|
|
img.src = images[i];
|
|
counter.textContent = `${i + 1} / ${images.length}`;
|
|
}
|
|
function next() { show(i + 1); }
|
|
function prev() { show(i - 1); }
|
|
|
|
document.getElementById('next').onclick = next;
|
|
document.getElementById('prev').onclick = prev;
|
|
|
|
btnT.onclick = () => {
|
|
playing = !playing;
|
|
btnT.textContent = playing ? 'Pause' : 'Play';
|
|
if (playing) timer = setInterval(next, 15000);
|
|
else clearInterval(timer);
|
|
};
|
|
|
|
btnF.onclick = () => {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight') next();
|
|
if (e.key === 'ArrowLeft') prev();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|