2e:null 2f:["$","title",null,{"children":"Observable-embedded slideshows | Jo Wood | Observable"}] 34:T1f12,async function slideshow(slides, options = {}) { const { display, invalidation, width = 1600, height = 900, transition = "none", ...config } = options; const frame = html`

`; const root = html`

`; frame.append(coreSlideStyle(), root); const container = root.querySelector(".slides"); const cleanups = []; const context = {root, frame}; const resolve = (source) => typeof source === "function" ? source(context) : source; const append = async (parent, source) => { const value = await resolve(source); if (value == null) { return; } if (Array.isArray(value)) { for (const item of value) { await append(parent, item); } return; } parent.append(value instanceof Node ? value : String(value)); }; const appendSync = (parent, value) => { if (value == null) { return; } if (Array.isArray(value)) { for (const item of value) { appendSync(parent, item); } return; } parent.append(value instanceof Node ? value : String(value)); }; const slideSpan = (content, className = "") => { const node = document.createElement("div"); node.className = `slide-span ${className}`.trim(); appendSync(node, content); return node; }; context.span = slideSpan; // Binds an input-like DOM element to one locally updated output. // Only the output node is replaced; the slide and deck remain intact. const view = (input, render, options = {}) => { const {className = "", event = "input", immediate = true} = options; const output = document.createElement("div"); output.className = className; let [version, disposed] = [0, false]; const update = async () => { const currentVersion = ++version; const fragment = document.createDocumentFragment(); try { await append(fragment, render(input.value, input, context)); // Ignore an obsolete asynchronous result when a newer input // event has already started another render. if (!disposed && currentVersion === version) { output.replaceChildren(fragment); } } catch (error) { if (!disposed && currentVersion === version) { const message = document.createElement("pre"); message.textContent = error?.stack ?? String(error); output.replaceChildren(message); } } }; input.addEventListener(event, update); cleanups.push(() => { disposed = true; input.removeEventListener(event, update); }); if (immediate) { update(); } return output; }; context.view = view; const descriptorKeys = [ "content", "notes", "className", "contentClassName", "ratios", "timing", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOpacity", "backgroundTransition", "backgroundColor", "backgroundGradient" ]; const setData = (element, values) => { for (const [name, value] of Object.entries(values)) { if (value != null) { element.dataset[name] = String(value); } } }; for (const item of slides) { const isDescriptor = item && typeof item === "object" && !(item instanceof Node) && descriptorKeys.some((key) => key in item); const { content, notes, className = "", contentClassName = "", ratios, timing, backgroundImage, backgroundSize = "contain", backgroundPosition = "center", backgroundRepeat = "no-repeat", backgroundOpacity, backgroundTransition, backgroundColor, backgroundGradient } = isDescriptor ? item : {content: item}; const section = document.createElement("section"); section.className = className; if (content != null) { const body = document.createElement("div"); body.className = `slide-content ${contentClassName}`.trim(); await append(body, content); if (body.classList.contains("slide-columns")) { const columnCount = [...body.children].filter( (child) => !child.classList.contains("slide-span") ).length; body.style.setProperty( "--slide-columns", columnTracks(columnCount, ratios) ); } section.append(body); } const resolvedBackgroundImage = await resolve(backgroundImage); setData(section, { backgroundImage: resolvedBackgroundImage, backgroundSize: resolvedBackgroundImage == null ? null : backgroundSize, backgroundPosition: resolvedBackgroundImage == null ? null : backgroundPosition, backgroundRepeat: resolvedBackgroundImage == null ? null : backgroundRepeat, backgroundOpacity, backgroundTransition, backgroundColor, backgroundGradient }); if (notes != null) { const aside = document.createElement("aside"); aside.className = "notes"; await append(aside, notes); section.append(aside); } if (timing != null) { section.dataset.timing = String(timing); } container.append(section); } if (typeof display !== "function") { throw new TypeError( "slideshow requires the calling cell’s display function" ); } display(frame); const deck = new Reveal(root, { embedded: true, width, height, transition, ...config, keyboard: false }); await deck.initialize(); const viewport = deck.getViewportElement(); viewport.classList.add("reveal"); const onKeydown = (event) => { if ( event.ctrlKey || event.metaKey || event.target.closest?.( "input, textarea, select, [contenteditable='true'], .speaker-notes" ) ) { return; } const navigationOptions = {skipFragments: event.altKey}; switch (event.key) { case "ArrowRight": case "ArrowDown": case "PageDown": case "n": case "N": deck.next(navigationOptions); break; case "ArrowLeft": case "ArrowUp": case "PageUp": case "p": case "P": deck.prev(navigationOptions); break; case " ": if (event.shiftKey) { deck.prev(navigationOptions); } else { deck.next(navigationOptions); } break; case "Home": deck.slide(0); break; case "End": deck.slide(deck.getHorizontalSlides().length - 1); break; case "f": case "F": { const ownerDocument = viewport.ownerDocument; const fullscreen = ownerDocument.fullscreenElement ? ownerDocument.exitFullscreen() : viewport.requestFullscreen(); fullscreen.catch((error) => { console.warn("Unable to change fullscreen mode.", error); }); break; } case "b": case "B": case "v": case "V": case ".": deck.togglePause(); break; default: return; } event.preventDefault(); event.stopPropagation(); }; root.addEventListener("keydown", onKeydown); cleanups.push(() => root.removeEventListener("keydown", onKeydown)); context.deck = deck; frame.deck = deck; invalidation?.then(() => { for (const cleanup of cleanups) { cleanup(); } deck.destroy(); }); } function columnTracks(count, ratios = []) { if (!Array.isArray(ratios)) { throw new TypeError("ratios must be an array"); } if (ratios.some((ratio) => !Number.isFinite(ratio) || ratio <= 0)) { throw new RangeError("ratios must contain positive finite numbers"); } return Array.from( {length: count}, (_, i) => `minmax(0, ${ratios[i] ?? 1}fr)` ).join(" "); }35:T18e1,function coreSlideStyle() { return html``; }36:T5fe,const joinClassNames = (...names) => names.filter(Boolean).join(" "); function makeSlide( content, {className = "", contentClassName = "", ...options} = {}, defaults = {} ) { return { ...options, content, className: joinClassNames(defaults.className, className), contentClassName: joinClassNames( defaults.contentClassName, contentClassName ) }; } const slide = { // Horizontally centred layout with horizontal and vertical centring central(content, {position = "mid", className = "", ...options} = {}) { if (!["mid", "upper"].includes(position)) { throw new RangeError('central position must be "mid" or "upper"'); } return makeSlide( content, { ...options, className: joinClassNames( position === "upper" && "slide-central--upper", className ) }, {className: "slide-central"} ); }, //Left-algined slide content left(content, options = {}) { return makeSlide(content, options, {className: "slide-body"}); }, // Multi-column layout with user-controllable width ratios. columns(content, options = {}) { return makeSlide(content, options, { className: "slide-columns-page", contentClassName: "slide-columns" }); }, // For fitting content to the full size of the slide area preserving aspect ratio. fit(content, options = {}) { return makeSlide(content, options, { className: "slide-fit-page", contentClassName: "slide-fit" }); } };37:[] 32:{"id":"21d372088cfc7886","slug":"observable-embedded-slideshow","title":"Observable-embedded slideshows","thumbnail":"18ca9b949505eaa196dafb98de652ac8a133361e4b1395dbc3867f54908e6259","access_level":"public","create_time":"$D2026-09-16T09:44:23.998Z","update_time":"$D2026-09-21T08:25:35.824Z","view_time":null,"first_public_time":"$D2026-09-21T08:02:55.353Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":237,"publish_version":237,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e02897f1b4db0237","slug":"slideshows","title":"slideshows","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"Observable-embedded slideshows","cells":[{"id":1,"value":"# Observable-embedded slideshows\n\n_For Powerpoint-style presentation of Observable content._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"1. **Introducing slideshow**\n1. [Using built-in slide layouts](https://observablehq.com/@jwolondon/using-built-in-slide-settings)\n1. [Advanced slide styling](https://observablehq.com/@jwolondon/advanced-slide-styling)\n1. [Interactive slides](https://observablehq.com/@jwolondon/interactive-slides)\n1. [Basic slide styling](https://observablehq.com/@jwolondon/basic-slide-styling)\n1. [Example: Visualising Electoral Bias](https://observablehq.com/@jwolondon/ldw-visualising-electoral-bias)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Slideshow comprises two importable functions that allow you to create slideshows for full-screen presentations. It provides an Observable-friendly interface for the JavaScript presentation framework [reveal.js](https://revealjs.com).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## Why use slideshow?\n\nIf you have written content including formatted text, static and dynamic visualization and data processing in Observable, it may be easier to reuse it in an Observable slideshow than creating an entirely separate presentation in Powerpoint, Keynote or other external presentation software.\n\nPresentations created with slideshow can be shared directly on the web. Simply share the Observable page that embeds the presentation, like this one on [visualizing electoral bias](https://observablehq.com/@jwolondon/ldw-visualising-electoral-bias).\n\nInteractive content in Observable is transferred directly to the presentation so you can use interaction in a presentation without having to swap in and out of the slideshow.\n\nSharing your work in a shared presentation allows your work to be scrutinised (and possibly improved) by others in the spirit of the [Open Science Movement](https://en.wikipedia.org/wiki/Open_science).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## How to use slideshow\n\nTo use in your notebooks:\n\n```javascript\nimport {slideshow, slide} from \"observable:@jwolondon/observable-embedded-slideshow\"\n```\n\nSlideshow content should be an array of functions that generate some displayable output ('DOM nodes'). This might be simple markdown, Plot output, HTML or anything that could be displayed in an Observable cell. Here, for example, is a minimal slideshow comprising two slides of markdown content and some Plot output:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"const slide1 = () => md`\n# My first slide\n## My name\n## My affiliation\n`;\n\nconst slide2 = () => md`\n# Introduction\nBoring slides use bullets to introduce their structure\n- Introduction\n- The substance of this presentation\n- Conclusions\n`;\n\nconst slide3 = () =>\n Plot.plot({\n marks: [\n Plot.dot(penguins, {\n x: \"body_mass_g\",\n y: \"flipper_length_mm\",\n fill: \"species\"\n })\n ]\n });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"To embed the slideshow, provide the slide content as the first argument, in a call to `slideshow()` as follows:\n\n```javascript\nslideshow(myContent, {invalidation, display})\n```\n\nFor example,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"slideshow([slide1, slide2, slide3], {invalidation, display})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Operating the slideshow\n\nClick or tap the slideshow to give it keyboard focus. You can then use the on-screen controls or the following keyboard shortcuts:\n\n| Action | Keyboard shortcut |\n|---|---|\n| Next slide | →, ↓, Page Down, N or Space |\n| Previous slide | ←, ↑, Page Up, P or Shift + Space |\n| First slide | fn ← (macOS) / Home (Windows) |\n| Last slide | fn → (macOS) / End (Windows) |\n| Enter or leave full-screen mode | F |\n| Pause or resume the presentation | B, V or . |\n\nPress Esc to leave full-screen mode. When a presentation is paused, its content is hidden until you press one of the pause keys again.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"[Using built-in slide layouts](https://observablehq.com/@jwolondon/using-built-in-slide-settings)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"_Interface for reveal.js:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import Reveal from \"npm:reveal.js@6.0.2\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"_For page style:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {defaultStyle} from \"observable:@jwolondon/utilities-cdt-2026\"","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"defaultStyle()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 33:"$32:body"