This repository contains a quick and dirty solution to remotely control two Reveal.js presentations at the same time. It is written with Express, Socket.IO and jQuery.
The presentations and all assets must be located in the slides folder which is exported.
- yarn
- node.js
- Run
yarn install - Configure IP address and port in
server.js - Customize basic auth in
auth.jsaccording to your needs - Start server via
yarn serve
This guide describes the basics for images, videos, text, and vertical slides in our presentation setup. For advanced options and features refer to the official Reveal.js Documentation.
Each slide is represented by a <section> element. Inside a slide, you can include images, videos, text blocks, or even nested sections for vertical navigation.
You can add images directly inside a slide:
<section>
<img src="./assets/image.jpg" />
</section>Images can have backgrounds or be transparent.
Videos can be embedded using the <video> element:
<section>
<video
id="videoname"
data-autoplay
muted="muted"
src="./assets/video.mp4"
></video>
</section>Important options:
id: Unique identifier for the video to control it via javascriptmuted: Ensures the video starts without sounddata-autoplay: Automatically starts playback when the slide becomes visibleloop: Restarts playback when the video ends.data-preload: Controls loading behavior (auto, metadata, none).
You can include text content using standard HTML elements:
<section>
<div class="text">
<h2>Example</h2>
</div>
</section>Text content can be combined with images or videos on the same slide. Any valid HTML is supported: headings, paragraphs, lists, etc.
.text is defined by us and ensures large, centered content. There are also other helper classes such as r-fit-text.
Reveal.js supports nested sections. If you place multiple <section> elements inside another, they become vertical slides.