Skip to content

WSParker/html-slides

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 

Repository files navigation

html-slides

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:

  1. 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.

Usage

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.

  1. class="slide" defines a slide. It will get its own slide number at the bottom right.
  2. 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.
  3. 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.

Gotchas

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.

About

Write your slideshows in html!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published