Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/slides-reveal.js.html

Created September 15, 2022 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/e42445fe4d8fc24b3e25b413aafbf5e0 to your computer and use it in GitHub Desktop.
Save nfreear/e42445fe4d8fc24b3e25b413aafbf5e0 to your computer and use it in GitHub Desktop.
Download ZIP
Slideshow test, built on Reveal.js
Raw
slides-reveal.js.html
<!doctype html><html lang="en"> <title> Slideshow test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="NDF, 13-Sep-2022">
<body data-X-class="h-screen full-page-demo" data-page="demo">
<div class="reveal">
<div class="slides">
<section data-X-background-image="https://abilitynet.org.uk/sites/abilitynet.org.uk/themes/abilitynet/logo.png">
<h1> Slide 1 </h1>
<p> Hello World!
<p>I'm built using <tt>Reveal.js</tt>
</section>
<section data-markdown>
## Slide 2
* This slide is written in Markdown. Handy!
```js
// I'm some Javascript code ;)
console.log('Hello world!');
```
</section>
<section data-markdown>
## Slide 3
* One … … … … … … … … … … … … … … &hellip;
* Two
* Three
* Four
* Five
</section>
<section data-markdown>
## Slide 4
</section>
</div>
</div>
<!--<script src="https://unpkg.com/reveal.js@4.3.1/dist/reveal.js"></script>-->
<link rel="stylesheet" href="https://unpkg.com/reveal.js@4.3.1/dist/reveal.css">
<link rel="stylesheet" href="https://unpkg.com/reveal.js@4.3.1/dist/theme/simple.css">
<link rel="x-stylesheet" href="https://unpkg.com/reveal.js@4.3.1/dist/theme/sky.css">
<style>
:root {
--r-background-color: #fefefe;
--r-main-color: #2C2A29;
--r-heading-color: #2C2A29;
--r-main-font: Arial, Helvetica, sans-serif;
--r-heading-font: Arial, Helvetica, sans-serif;
}
[ data-slide-rh = '0' ] {
--r-background-color: #005C6E;
--r-main-color: #fff;
--r-heading-color: #fff;
--r-link-color: #fff;
}
.slide-background {
x-background-image: url(https://abilitynet.org.uk/sites/abilitynet.org.uk/themes/abilitynet/logo.png);
background-position: top 1vh right 1vw;
background-repeat: no-repeat;
background-size: 22vw;
}
[ data-slide-rh = '0' ] .slide-background {
background-image: url(https://abilitynet.org.uk/sites/abilitynet.org.uk/themes/abilitynet/logo.png);
}
.reveal .progress {
height: .4rem;
}
/* { --r-background-color: #000;
--r-main-font: Lato, sans-serif;
--r-main-font-size: 40px;
--r-main-color: #fff;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: News Cycle, Impact, sans-serif;
--r-heading-color: #000;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none;
--r-heading-text-shadow: none;
--r-heading-font-weight: normal;
--r-heading1-text-shadow: none;
--r-heading1-size: 3.77em;
--r-heading2-size: 2.11em;
--r-heading3-size: 1.55em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #00008B;
--r-link-color-dark: #00003f;
--r-link-color-hover: #0000f1;
--r-selection-background-color: rgba(0, 0, 0, 0.99);
--r-selection-color: #fff;
} */
</style>
<script type="module">
import Reveal from 'https://unpkg.com/reveal.js@4.3.1/dist/reveal.esm.js';
import Markdown from 'https://unpkg.com/reveal.js@4.3.1/plugin/markdown/markdown.esm.js';
// import Highlight from 'https://unpkg.com/reveal.js@4.3.1/plugin/highlight/highlight.esm.js';
const deck = new Reveal(document.querySelector('.reveal'), {
// https://revealjs.com/config/
controls: true,
controlsTutorial: true,
controlsLayout: 'bottom-right',
progress: true,
slideNumber: true,
hash: true,
hashOneBasedIndex: true,
help: true,
keyboard: true,
autoSlide: false, // 0,
// Stop auto-sliding after user input
autoSlideStoppable: true,
autoPlayMedia: false,
plugins: [ Markdown ] // , Highlight ]
});
deck.initialize().then(ev => {
document.documentElement.classList.add('r-ready');
document.documentElement.dataset.slideRh = ev.indexh; // .add('r-slide-');
document.documentElement.dataset.slideRv = ev.indexv;
console.debug('Impress.js: slides ready!', ev);
});
deck.on('slidechanged', ev => {
document.documentElement.dataset.slideRh = ev.indexh;
document.documentElement.dataset.slideRv = ev.indexv;
console.debug('Slide changed:', ev);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment