html-slides allows you to write html and have it present as a slideshow. It was written mainly for personal use, but can be included in any html project via CDN.
That said, if you want to easily make slideshows in HTML and type equations in LaTeX, give it a try. Usage is simple, functionality is minimal.
You can:
- Move forward and back using the right/left arrow keys.
- This cycles through the elements on each slide, then moves to the next slide.
- If you hold the arrow key down, it will cycle through the elements on each slide, but stop before proceeding to the next slide.
- To cycle through elements AND slides without stopping, hold the shift key down.
Include html-slides by adding <script src="https://cdn.jsdelivr.net/gh/WSParker/html-slides@main/dist/slides.min.js" type='text/javascript'></script>
to the head of your HTML.
html-slides uses three classes: .slide
, .as-n
, and .ag-n-m
.
class="slide"
defines a slide. It will get its own slide number at the bottom right.class="as-n"
defines an element that will appear on the nth rightarrow (or spacebar) after its containing slide appears, and stay for the duration of the slide.class="ag-n1-n2-n3"
defines an element that will be visible for the n1th, n2th, and n3th rightarrows after its containing slide appears, but will disappear after that.
Check out the demo here.
Anything not inside a .slide
container won't be handled by html-slides. It will probably just be visible throughout the presentation.
If you skip a number in your animations, (i.e., you have 1 2 3 5), nothing after that skipped number will show up.