Minimal HTML Slideshow Implementation in 22 Lines of JavaScript
By
Curiositry
6mo ago· 1 min readen
38/100
Stale
Bagelometer↗
Tired, dry, slightly forgotten on the back of the tray.
Score38Typehow-toSentimentpositive
Summary
The article presents a minimal HTML slideshow implementation using only 22 lines of JavaScript (371 bytes). It demonstrates how to create a functional slideshow with navigation controls (j/k keys for slide movement, 'n' for notes toggle) and includes BroadcastChannel for cross-tab synchronization. The code shows how to efficiently select slide elements and their associated notes, with smooth scrolling between slides.
Key quotes
· 4 pulledHTML Slides with notes ... in 22 lines, or 371 bytes of JavaScript
let a=[...document.getElementsByClassName('slide')].map((a,b)=>[a,'slidenote'==(b=a.nextElementSibling)?.className?b:a]),b=0,c=0,d=()=>a[b][c].scrollIntoView()
e.onmessage=({data:a})=>{c^=a.c,b=a.b,d()};document.addEventListener('keypress',({key:f})=>{b+=(f=='j')-(f=='k');b=b<0?0:b>l?l:b;c^=f=='n';e.postMessage({c,b});d()})
... but not before pointing out that this really minifies to super-tiny code - and still
Don't worry, I'll walk you all through it in a readable font size!
