Skip to content

Instantly share code, notes, and snippets.

@amundo
Last active January 13, 2017 17:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save amundo/503227b71f4f73d4fbae819c4de568d7 to your computer and use it in GitHub Desktop.
the teensiest slide application in human history: try it at http://ruphus.com/slides.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tiny slides</title>
</head>
<body>
<main>
<section>
1. each slide is a &lt;section&gt; under the &lt;main&gt; tag. hit the right arrow to proceed…
</section>
<section>
2. second slide (left arrow goes back)
</section>
<section>
third slide (right will wrap around). All Javascript, HTML, and CSS less than 100 lines!
</section>
</main>
<style>
* {
padding:0;
margin:0;
}
body, main { display:flex; }
body {
height:100vh;
}
main {
flex:1;
}
main > section {
display:none;
flex:1;
justify-content:center;
align-items:center;
}
main section:first-child {
display:flex;
}
</style>
<script>
let main = document.querySelector('main');
let slide = document.querySelector('main > section');
document.addEventListener('keyup', ev => {
if(ev.which == 39 ){ // RIGHT_ARROW
main.insertAdjacentElement('beforeend', main.firstElementChild);
slide = main.firstElementChild;
} else if(ev.which == 37){ // LEFT_ARROW
main.insertAdjacentElement('afterbegin', main.lastElementChild);
slide = main.firstElementChild;
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment